放大镜效果

最新推荐文章于 2022-03-05 11:04:32 发布

肖大侠拯救地球

最新推荐文章于 2022-03-05 11:04:32 发布

阅读量257

点赞数

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"/> <title>放大镜效果</title> <style> body div { margin: 0; padding: 0; } #box { width: 400px; height: 711px; position: relative; background: darkgreen; box-shadow: 3px 3px 10px #111111; } #box img { width: 100%; height: 100%; } #mark { position: absolute; top: 0; left: 0; width: 200px; height: 355px; background: rgba(0, 0, 0, 0.5); display: none; } #boxRight{ position: absolute; top: 0; left: 430px; width: 400px; height: 711px; display: none; overflow: hidden; } #boxRight img{ width: 200%; height: 200%; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="box"> <img src="2.jpg"/> <div id="mark"></div> </div> <div id="boxRight"> <img src="1.jpg"/> </div> </body>
<script>

    var box = document.getElementById("box"); var mark = document.getElementById("mark"); var boxRight = document.getElementById("boxRight"); function setPosition(e) { var tempL= 0,tempT=0; //正常情况下我们获取top和left  var top = e.clientY - box.offsetTop - (mark.offsetHeight / 2); var left = e.clientX - box.offsetLeft - (mark.offsetWidth / 2); //需要做边界判断  var minL = 0, minT = 0, maxL = box.offsetWidth - mark.offsetWidth, maxT = box.offsetHeight - mark.offsetHeight; if (left < minL) { mark.style.left = minL + 'px'; tempL=minL; } else if (left > maxL) { mark.style.left = maxL + 'px'; tempL=maxL; } else { mark.style.left = left + 'px'; tempL=left; } if (top < minT) { mark.style.top = minT + 'px'; tempT=minT; } else if (top > maxT) { mark.style.top = maxT + 'px'; tempT=maxT; } else { mark.style.top = top + 'px'; tempT=top; } //让右侧图片跟着运动,左侧移动多少,右侧移动2倍  var oImg=boxRight.getElementsByTagName("img")[0]; oImg.style.left=-tempL*2+"px"; oImg.style.top=-tempT*2+"px"; } box.onmouseenter = function (e) { e = e || window.event; mark.style.display = "block"; boxRight.style.display = "block"; setPosition(e); } box.onmousemove = function (e) { e = e || window.event; mark.style.display = "block"; setPosition(e); } box.onmouseleave = function (e) { e = e || window.event; mark.style.display = "none"; boxRight.style.display = "none"; } </script>

</html>

肖大侠拯救地球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜效果

html>html>head> meta charset="utf-8"/> title>放大镜效果title> style> body div { margin: 0; padding: 0; } #box { width: 400px;
复制链接

扫一扫