京东放大镜效果
实现放大镜主要知识点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>
这样就可以实现放大效果啦，希望这些能对对大家有所帮助。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js的设计模式之构造函数模式详解
前端为什么要使用模块化？
web前端关于浏览器兼容性问题的解决方案
以上就是怎样做出京东商品详情的放大镜效果的详细内容。