JS实现放大镜效果
程序员文章站
2022-07-06 16:04:05
js实现放大镜效果,供大家参考,具体内容如下鼠标移到图片上就可以放大一块区域代码: &...
js实现放大镜效果,供大家参考,具体内容如下
鼠标移到图片上就可以放大一块区域
代码:
<!doctype html> <html lang="en"> <head> <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> </head> <body> <div id="small"> <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事"> <div id="mark"></div> </div> <div id="big"> <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事"> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 提升Nginx性能的一些建议