电子商务网站放大效果的三种常用的实现方式。
【摘要】 预览效果（这里截取静态，有兴趣的可以运行下面的代码）：
实现方式1.
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>电子商务网站放大镜效果1</title> <style type="text/css"> html, body, div { margin: 0; padding: 0; } #...
预览效果（这里截取静态，有兴趣的可以运行下面的代码）：
实现方式1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商务网站放大镜效果1</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#tab { position: relative; width: 300px; height: 300px;margin: 50px ; background: #CDE074; }
#mark { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #B00000; opacity: 0.5; filter: alpha(opacity=50); cursor: move; }
#container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
#bigImg{ position:absolute; display:block; border:none;}
</style>
</head>
<body>
<div id="tab">
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="300" height="300" id="img1">
</div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
var oTab = document.getElementById("tab");
//获得oDiv本身的高和宽；获得oDiv距离浏览器左上角的位移；
var tabT = oTab.offsetTop;
var tabL = oTab.offsetLeft;
var tabW = oTab.offsetWidth;
var tabH = oTab.offsetHeight;
//onmouseenter限制冒泡机制
oTab.onmouseenter = function (e) {
//创建大图容器
var container = document.createElement("div");
container.id = "container";
this.appendChild(container);
var bigImg=document.createElement("img");
bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);
//当鼠标移近来的时候，动态创建一个DIV元素，id是mark
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);//像oTab里添加mark；
//执行setMark
setMark(mark, container, e);
};
oTab.onmousemove = function (e) {
var mark = document.getElementById("mark");
if (mark) {
//先判断mark是否存在，如果存在，执行setMark
setMark(mark, container, e);
}
};
//onmouseleave也可以显示冒泡机制;
oTab.onmouseleave = function () {
var mark = document.getElementById("mark");
if (mark) {
//当离开的时候移除mark节点；
this.removeChild(mark);
this.removeChild(container);
}
};
var jiance=document.getElementById("jiance");
function setMark(mark,container,e) {
e = e || window.event;
//上面是绑定事件的标配；
//获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间；
var markW = mark.offsetWidth;
var markH = mark.offsetHeight;
var l = e.clientX - tabL - (markW / 2);
var t = e.clientY - tabT - (markH / 2);
mark.style.left = l + "px";
mark.style.top = t + "px";
container.style.left=tabW+10+"px";
container.style.top=0;
bigImg.style.left="-"+l/tabW*bigImg.width+"px";
bigImg.style.top="-"+t/tabH*bigImg.height+"px";
//下面是判断边界，当鼠标移到左边界和右边界的判断；
if (l < 0) {
mark.style.left = 0;
} else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
}
//当鼠标移到上边界和下边界的判断；
if (t < 0) {
mark.style.top = 0 + "px";
} else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
}
};
</script>
实现方式二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商务网站放大镜效果2</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#tab { position: relative; width: 300px; height: 300px;margin: 50px ; background: #CDE074; }
#mark { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #B00000; opacity: 0.5; filter: alpha(opacity=50); cursor: move; }
#container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
#bigImg{ position:absolute; display:block; border:none;}
</style>
</head>
<body>
<div id="tab">
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="300" height="300" id="img1">
</div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
//获得oDiv本身的高和宽；获得oDiv距离浏览器左上角的位移；
var oDiv = document.getElementById("tab");
var off = offset.call(oDiv);
oDiv.onmouseenter = function (e) {
//小图
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);
//创建大图容器
var container = document.createElement("div");
container.id = "container";
this.appendChild(container);
var bigImg=document.createElement("img");
bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);
setMark(mark, container, e);
}
oDiv.onmousemove = function (e) {
var mark = document.getElementById("mark");
if (mark) {
critical(this, mark, e);
}
}
oDiv.onmouseleave = function (e) {
var mark = document.getElementById("mark");
if (mark) {
this.removeChild(mark);
}
}
function critical(oDiv, mark, e) {
e = e || window.event;
var l = e.clientX - off.left - (mark.offsetWidth / 2);
var t = e.clientY - off.top - (mark.offsetHeight / 2);
mark.style.top = t + "px";
mark.style.left = l + "px";
if (l <= 0) {
mark.style.left = 0;
} else if (l >= (oDiv.offsetWidth - mark.offsetWidth)) {
mark.style.left = oDiv.offsetWidth - mark.offsetWidth + "px";
}
if (t <= 0) {
mark.style.top = 0;
} else if (t >= (oDiv.offsetHeight - mark.offsetHeight)) {
mark.style.top = oDiv.offsetHeight - mark.offsetHeight + "px";
}
}
function setMark(mark,container,e) {
e = e || window.event;
//上面是绑定事件的标配；
//获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间；
var markW = mark.offsetWidth;
var markH = mark.offsetHeight;
var l = e.clientX - tabL - (markW / 2);
var t = e.clientY - tabT - (markH / 2);
mark.style.left = l + "px";
mark.style.top = t + "px";
container.style.left=tabW+10+"px";
container.style.top=0;
bigImg.style.left="-"+l/tabW*bigImg.width+"px";
bigImg.style.top="-"+t/tabH*bigImg.height+"px";
//下面是判断边界，当鼠标移到左边界和右边界的判断；
if (l-15 < 0) {
mark.style.left = 0;
} else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
}
//当鼠标移到上边界和下边界的判断；
if (t < 0) {
mark.style.top = 0 + "px";
} else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
}
};
function offset() {
var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent;
while (par) {
left += par.offsetLeft;
top += par.offsetTop;
if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
left += par.clientLeft;
top += par.clientTop;
}
par = par.offsetParent;
}
return {
left: left,
top: top
};
}
</script>
实现方式三：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商务网站放大镜效果</title>
<style type="text/css">
html, body, div img{ margin: 0; padding: 0; }
#tab { position: relative; width: 450px; height: 450px;margin: 50px ; background: #CDE074; }
#mark { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #B00000; opacity: 0.5; filter: alpha(opacity=50); cursor: move; }
#container{ position:absolute; height:450px; width:450px; background:pink; overflow:hidden;left: 350px;top: 0px}
#bigImg{ position:absolute; display:block; border:none;}
</style>
</head>
<body>
<div id="tab">
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="450" height="450" id="img1">
</div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
var oTab = document.getElementById("tab");
//获得oDiv本身的高和宽；获得oDiv距离浏览器左上角的位移；
var tabT = oTab.offsetTop;
var tabL = oTab.offsetLeft;
var tabW = oTab.offsetWidth;
var tabH = oTab.offsetHeight;
//onmouseenter限制冒泡机制
oTab.onmouseenter = function (e) {
//创建大图容器
var container = document.createElement("div");
container.id = "container";
this.appendChild(container);
var bigImg=document.createElement("img");
bigImg.src="https://img-blog.csdnimg.cn/2020073120293658.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);
//当鼠标移近来的时候，动态创建一个DIV元素，id是mark
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);//像oTab里添加mark；
//执行setMark
setMark(mark, container, e);
};
oTab.onmousemove = function (e) {
var mark = document.getElementById("mark");
if (mark) {
//先判断mark是否存在，如果存在，执行setMark
setMark(mark, container, e);
}
};
//onmouseleave也可以显示冒泡机制;
oTab.onmouseleave = function () {
var mark = document.getElementById("mark");
if (mark) {
//当离开的时候移除mark节点；
this.removeChild(mark);
this.removeChild(container);
}
};
var jiance=document.getElementById("jiance");
function setMark(mark,container,e) {
e = e || window.event;
//上面是绑定事件的标配；
//获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间；
var markW = mark.offsetWidth;
var markH = mark.offsetHeight;
var l = e.clientX - tabL - (mark.offsetWidth / 2);
var t = e.clientY - tabT - (mark.offsetHeight / 2);
mark.style.left = l + "px";
mark.style.top = t + "px";
container.style.left=tabW+10+"px";
container.style.top=0;
// bigImg.style.left="-"+(l/tabW*bigImg.width)+"px";
// bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
//如果样式用上面的写，在IE678的时候有兼容性问题，应该改为下面的
if(l<=0){
bigImg.style.left=="0px";
}else{
bigImg.style.left="-"+l/tabW*bigImg.width+"px";
}
if(t<=0){
bigImg.style.top=="0px";
}else{
bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
}
console.log("====t::"+parseInt(t));
//下面是判断边界，当鼠标移到左边界和右边界的判断；
if (l < 0) {
mark.style.left = 0;
} else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
}
//当鼠标移到上边界和下边界的判断；
if (t < 0) {
mark.style.top = 0 + "px";
} else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
}
};
</script>
文章来源: sunmenglei.blog.csdn.net，作者：孙叫兽，版权归原作者所有，如需转载，请联系作者。
原文链接：sunmenglei.blog.csdn.net/article/details/111468582
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）