放大镜特效
放大镜在商城网站经常会看到，作为前端，写这么一个肯定是小case，本人就献丑了。如果没有一点思路的同学，可以先学DOM事件里的事件位置、距离、宽高各种方法属性。
那么直接上代码，代码里各种注释相当完备：
栗子代码链接
<!doctype html><title>放大镜</title><meta charset="utf-8"><style> ?*{ ???margin:0; ???padding:0; ???list-style:none; ?} ???/*处理小图的样式*/ ?#small{ ???width:400px; ???height:400px; ???border:1px solid red; ???position:absolute; ???left:50px; ???top:50px; ?} ???#small img{ ???width: 100%; ???height: 100%; ?} ???#move{ ???border:1px solid yellow; ???background:yellow; ???position:absolute; ???left:0px; ???top:0px; ???opacity:0.3; ???display:none; ?} ?/*图层蒙版*/ ?.mask{ ???width:100%; ???height:100%; ???position: absolute; ???top:0; ???left:0; ?} ???/*处理大图*/ ?#big{ ???width:400px; ???height:400px; ???border:1px solid red; ???position:absolute; ???left:460px; ???top:50px; ???display:none; ???/*超出隐藏*/ ???overflow:hidden; ?} ?#big img{ ???width:1000px; ???height:1000px; ???position:absolute; ?} ???/*处理点击更换的样式*/ ?#dian{ ???width:400px; ???height:100px; ???border:1px solid green; ???position:absolute; ???left:50px; ???top:460px; ?} ?#dian li{ ???float:left; ???padding:1px; ?} ?#dian li img{ ???width:98px; ?}</style><!--1.先做小图--><div id="small"> ?<img id="smallImg" src="image/1.jpg" > ?<div id="move"></div> ?<!-- 图层蒙版 --> ?<div class="mask"></div></div><!--2处理大图 移入small 大图显示--><div id="big"> ?<img id="bigImg" src="image/1.jpg" ></div><!--3更换图片--><ul id="dian"> ?<li><img src="image/1.jpg"></li> ?<li><img src="image/2.jpg"></li> ?<li><img src="image/3.jpg"></li> ?<li><img src="image/4.jpg"></li></ul><script> var big=document.getElementById(‘big‘); var bigImg=document.getElementById(‘bigImg‘); var small=document.getElementById(‘small‘); var smallImg=document.getElementById(‘smallImg‘); var move=document.getElementById(‘move‘); var dian=document.getElementById(‘dian‘); var imgs=dian.getElementsByTagName(‘img‘); //小滑块的宽高：// big.offsetWidth/move=bigImg.offsetWidth/smallImg.offsetWidth// move=big/(bigImg.offsetWidth/smallImg.offsetWidth)// console.log(big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth)); ???//鼠标移入small显示move和big，且设置move的大小 ???small.onmouseover = function(){ ???big.style.display=‘block‘; ???move.style.display=‘block‘; ???move.style.width = big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth)+ ‘px‘; ???move.style.height = big.offsetHeight/(bigImg.offsetHeight/smallImg.offsetHeight) + ‘px‘; ?}; ?//鼠标移出隐藏move和big ???small.onmouseout = function(){ ?????big.style.display = ‘none‘; ?????move.style.display = ‘none‘; ?}; ?small.onmousemove=function(e){
???var e=e||window.event; ???//1.获取鼠标在small的位置 ?且 让小滑块居中 ???// 第一种方法： ???// console.log(e.clientX);//e.pageX ???// var x=e.clientX-small.offsetLeft - (move.offsetWidth/2); ???// var y=e.clientY-small.offsetTop - (move.offsetHeight/2); ???// ???// 第二种方法：添加图层蒙版 因为e.offsetX获取是根据在触发元素中的所在坐标 ???var x = e.offsetX - move.offsetWidth/2; ???var y = e.offsetY - move.offsetHeight/2; ???// console.log(y); ???//2移动前判断是否超出零界点 ???if(x<=0){ ?????x = 0; ???} ???if(x>=(small.offsetWidth-move.offsetWidth)){ ?????x = small.offsetWidth-move.offsetWidth; ???} ???if(y<=0){ ?????y = 0; ???} ???if(y>=(small.offsetHeight-move.offsetHeight)){ ?????y = small.offsetHeight-move.offsetHeight; ???} ???//3.让小滑块跟着鼠标移动 ???????move.style.left= x + ‘px‘; ???move.style.top= y + ‘px‘;//parseInt ?10 ???//4. 让大图跟着small里滑块移动的距离 1000 ?400 2.5 ???????var left = - (bigImg.offsetWidth/smallImg.offsetWidth) * x; ????????var top = - (bigImg.offsetHeight/smallImg.offsetHeight) * y; ????//5.把移动值赋给大图从而定位 ???????bigImg.style.left=left + ‘px‘; ???bigImg.style.top=top + ‘px‘; ?} ???//点解dian中的某一图片，把该图片src赋给smallImg和bigImg ??for(var i=0;i<imgs.length;i++){ ???imgs[i].onclick=function(e){ ?????var e=e||window.event; ?????console.log(this.src); ?????smallImg.src=this.src; ??????bigImg.src=this.src; ???} ?} ?</script>
JS 放大镜特效
原文地址：https://www.cnblogs.com/xzsz/p/9549992.html