怎样做出京东商品详情的放大镜效果

来源：动视网责编：小采时间：2020-11-27 20:00:53

怎样做出京东商品详情的放大镜效果

怎样做出京东商品详情的放大镜效果:京东放大镜效果实现放大镜主要知识点javascript中DOM操作。javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWid

推荐度：

点击下载本文 文档为doc格式

导读怎样做出京东商品详情的放大镜效果:京东放大镜效果实现放大镜主要知识点javascript中DOM操作。javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWid

京东放大镜效果

实现放大镜主要知识点

javascript中DOM操作。

javascript中时间的获取，主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY，clientX,还有获取元素宽度offsetWidth、offsetHight等。

这里面好考虑到绝对定位，以及放大倍率的计算，里面用到的倍率计算公式（小框里面的放大区域面积/小框面积）=（大框的面积/大筐里的大照片的面积）//大照片的原理是将其放在大框里，将大框的css样式设置为overflow：hidden,这样可以将你小筐里的区域按比例显示在大框里面。

具体代码实现情况如下

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style type="text/css">
 *{ margin: 0; padding: 0; }
 #small{ float: left; width:450px; height:450px; border: 1px solid black; margin-left: 100px; position:absolute; }
 #big{ float: left; width:600px; height:600px; overflow: hidden; border: 1px solid black; position: absolute; left:600px; top: 0px; }
 #magnifying{ width: 200px; height:200px; background-color: cornflowerblue; opacity: 0.4; left: 0px; top: 0px; position: absolute; }
 #bigImg{ position: absolute; width: 1350px; height:1350px; }
 </style>
 </head>
 <body>
 <p id="small">
 <img src="img/1.png" />//记得将其设置与小框大小一致 <p id="magnifying"></p>
 </p>
 <p id="big">
 <img src="img/2.jpg" id="bigImg" />
 </p>
 <script type="text/javascript">
 var small=document.getElementById("small"); var magnifying=document.getElementById("magnifying"); var big=document.getElementById("big"); var bigImg=document.getElementById("bigImg");

 small.onmouseenter=function(){
 magnifying.style.display="block";
 bigImg.style.display="block"
 }
 small.onmouseleave=function(){
 magnifying.style.display="none";
 bigImg.style.display="none";
 }
 small.onmousemove=function(event){
 var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2; var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2; var leftMax=small.offsetWidth-magnifying.offsetWidth; var topMax=small.offsetHeight-magnifying.offsetHeight; //限制鼠标移动的区域
 left = left<=0 ? 0 : left;
 top = top <=0? 0:top; //限制右边界与下边界
 left =left>=leftMax?leftMax:left;
 top =top>=topMax?topMax:top;

 magnifying.style.left=left+"px";
 magnifying.style.top=top+"px"; //核心代码
 var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth); var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
 bigImg.style.left=imgLef+"px";
 bigImg.style.top=imgTop+"px";
 } </script>
 </body></html>

这样就可以实现放大效果啦，希望这些能对对大家有所帮助。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！