源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

鼠标放在图片上显示大图的JS代码

  • 时间:2020-03-31 22:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:鼠标放在图片上显示大图的JS代码
显示大图和隐藏大图的js代码:
[u]复制代码[/u] 代码如下:
<script type="text/javascript">    //显示图片    function over(imgid,obj,imgbig)    { //大图显示的最大尺寸  4比3的大小  400 300 maxwidth=400; maxheight=300; //显示         obj.style.display="";         imgbig.src=imgid.src;                 //1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3         //2、如果宽超过了并且高没有超,设置宽为最大值         //3、如果宽没超过并且高超过了,设置高为最大值         if(img.width>maxwidth&&img.height>maxheight)         {             pare=(img.width-maxwidth)-(img.height-maxheight);             if(pare>=0)                 img.width=maxwidth;             else                 img.height=maxheight;         }         else if(img.width>maxwidth&&img.height<=maxheight)         {             img.width=maxwidth;         }         else if(img.width<=maxwidth&&img.height>maxheight)         {             img.height=maxheight;         }               }    //隐藏图片    function out()    { document.getElementById('divImage').style.display="none";    } </script>
显示小图的image和显示大图的image:
[u]复制代码[/u] 代码如下:
<img id="img" src="http://www.1sucai.cn/images/logo.gif" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />     <%--显示大图标的区域--%>     <div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">         <img id="imgbig" src="http://www.1sucai.cn/images/logo.gif" alt="预览" />     </div>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部