首页 > 代码库 > js放大镜效果

js放大镜效果

<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放大镜效果