京东放大镜效果
实现放大镜主要知识点
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><div id="small"><img src="img/1.png" />//记得将其设置与小框大小一致<div id="magnifying"></div></div><div id="big"><img src="img/2.jpg" id="bigImg" /></div><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>
这样就可以实现放大效果啦，希望这些能对对大家有所帮助。
