电子商务网站放大效果的三种常用的实现方式。
【摘要】 预览效果（这里截取静态，有兴趣的可以运行下面的代码）：
实现方式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）