mouse width fun cli nts move splay 跟着
- <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>
js 放大镜效果
来源: http://www.bubuko.com/infodetail-2016481.html