JS实现电商商品展示放大镜特效
程序员文章站
2022-04-10 10:02:00
本文实例为大家分享了js实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下
知识点
1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒...
本文实例为大家分享了js实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下
知识点
1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步
运行效果
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
#box {
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#box > #small_box {
height: 100%;
width: 100%;
border: 1px solid #cccccc;
box-sizing: border-box;
position: relative;
}
#box > #small_box > img {
height: 100%;
width: 100%;
}
#box > #small_box > #mask {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .4);
position: absolute;
left: 0;
top: 0;
cursor: move;
/*隐藏*/
display: none;
}
#box > #big_box {
height: 600px;
width: 600px;
border: 1px solid #cccccc;
position: absolute;
left: 360px;
top: 0;
overflow: hidden;
display: none;
}
#box > #big_box > img{
position: absolute;
left: 0;
top: 0;
}
#list {
margin: 20px 0 0 100px;
}
#list ul li {
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="images/pic001.jpg" alt="">
<span id="mask"></span>
</div>
<div id="big_box">
<img src="images/pic01.jpg" alt="">
</div>
</div>
<div id="list">
<ul>
<li><img src="images/pic0001.jpg" alt=""></li>
<li><img src="images/pic0002.jpg" alt=""></li>
<li><img src="images/pic0003.jpg" alt=""></li>
<li><img src="images/pic0004.jpg" alt=""></li>
</ul>
</div>
<script src="../../mytools/mytools.js"></script>
<script>
window.addeventlistener('load', function (ev) {
// 1. 获取标签
var box = mytools.$('box'), s_box = box.children[0], b_box = box.children[1], mask = s_box.children[1];
var list_lis = mytools.$('list').getelementsbytagname('li');
b_img = b_box.children[0];
// 2. 监听鼠标进入小盒子
s_box.addeventlistener('mouseover', function (evt) {
// 2.1 显示隐藏内容
mask.style.display = 'block';
b_box.style.display = 'block';
// 2.2 监听鼠标移动
s_box.addeventlistener('mousemove', function (evt1) {
var e = evt1 || window.event;
// 2.3 求出鼠标坐标
var pointx = e.pagex - box.offsetleft - mask.offsetwidth * 0.5;
var pointy = e.pagey - box.offsettop - mask.offsetheight * 0.5;
// 2.4 边界碰撞检测
if (pointx < 0) {
pointx = 0
} else if (pointx >= s_box.offsetwidth - mask.offsetwidth - 2) {
pointx = s_box.offsetwidth - mask.offsetwidth - 2;
}
if (pointy < 0) {
pointy = 0
} else if (pointy >= s_box.offsetheight - mask.offsetheight - 2) {
pointy = s_box.offsetheight - mask.offsetheight - 2;
}
// 2.5 让放大镜走起来
mask.style.left = pointx + 'px';
mask.style.top = pointy + 'px';
// 2.6 让大盒子中图片走起来
/*
* smallx / bigx = sbox.width / bbox.width
* bixx = smallx/(sbox.width / bbox.width)
* */
b_img.style.left = -pointx / (s_box.offsetwidth/b_box.offsetwidth) + 'px';
b_img.style.top = -pointy / (s_box.offsetheight/b_box.offsetheight) + 'px';
})
});
// 3. 监听鼠标离开小盒子
s_box.addeventlistener('mouseout', function (evt) {
// 2.1 隐藏内容
mask.style.display = 'none';
b_box.style.display = 'none';
});
// 4. 监听鼠标点击li标签
for (var i = 0; i < list_lis.length; i++) {
(function (i) {
var li = list_lis[i];
li.addeventlistener('mouseover',function (ev1) {
s_box.children[0].src = 'images/pic0'+(i+1)+'.jpg';
b_img.src = 'images/pic0'+(i+1)+'.jpg';
});
})(i);
}
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： php实现的PDO异常处理操作分析