今天带来JS实现放大镜效果教程详解

JS实现放大镜效果，供大家参考，具体内容如下

鼠标移到图片上就可以放大一块区域

代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>   #small{     width: 700px;     height: 340px;     position: absolute;     left: 70px;     top: 100px;   }   #small img{     width: 100%;     height: 100%;   }   #mark{     width: 200px;     height: 200px;     background-color:white;     position: absolute;     opacity: 0.5;     filter: alpha(opacity=50);     left: 0px;     top: 0px;     display: none;   }   #big{     width: 400px;     height: 400px;     border: 1px solid black;     left: 800px;     top: 100px;     position: absolute;     overflow: hidden;     display: none;   }   #big img{     width: 1400px;     height: 680px;     position: absolute;     left: 0px;     top: 0px;   } </style> <script>   window.onload = function(){     var oSmall = document.getElementById("small");     var oBig = document.getElementById("big");     var oMark = document.getElementById("mark");     var oBigImg = oBig.getElementsByTagName("img")[0];       oSmall.onmouseover = function(){       oMark.style.display = "block";       oBig.style.display = "block";     }     oSmall.onmouseout = function(){       oMark.style.display = "none";       oBig.style.display = "none";     }     oSmall.onmousemove = function(ev){       var e = ev || window.event;       var l = e.clientX - oSmall.offsetLeft - 100;       if(l <= 0){         l = 0;       }       if(l >= (700-200)){         l = 500;       }       var t = e.clientY - oSmall.offsetTop - 100;       if(t <= 0){         t = 0;       }       if(t >= (340-200)){         t = 140;       }       oMark.style.left = l + 'px';       oMark.style.top = t + 'px';         /* 右边图片移动方向与左边图片方向相反且成倍数移动 */       oBigImg.style.left = l * -2 + 'px';       oBigImg.style.top = t * -2 + 'px';       }   } </script>     <div id="small">   <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事" style="width: auto;">   <div id="mark"></div> </div> <div id="big">   <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事" style="width: 98%;"> </div>

以上就是JS实现放大镜效果的详细内容，更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章！