首页 > 代码库 > 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放大镜效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。