JS实现放大镜效果
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
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="/UploadFiles/2021-04-02/地狱之门卫士 加里奥.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:vue element ui validate 主动触发错误提示操作