本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下
<强>知识点
1。使用儿童获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步
<>强运行效果
代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
* {
保证金:0;
填充:0;
list-style:没有;
边界:没有;
}
#箱{
宽度:350 px;
身高:350 px;
保证金:100 px 0 0 100 px;
位置:相对;
}
#箱比;# small_box {
高度:100%;
宽度:100%;
边界:1 px固体# cccccc;
box-sizing: border-box;
位置:相对;
}
#箱比;# small_box比;img {
高度:100%;
宽度:100%;
}
#箱比;# small_box比;#{面具
宽度:100 px;
身高:100 px;
background - color: rgba (255、255、0。4);
位置:绝对的;
左:0;
上图:0;
光标:移动;/*隐藏*/显示:没有;
}
#箱比;# big_box {
身高:600 px;
宽度:600 px;
边界:1 px固体# cccccc;
位置:绝对的;
左:360 px;
上图:0;
溢出:隐藏;
显示:没有;
}
#箱比;# big_box比;img {
位置:绝对的;
左:0;
上图:0;
}
#{列表
保证金:20 px 0 0 100 px;
}
# ul列表li) {
浮:左;
保证金:5 px;
光标:指针;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; div id=皊mall_box”比;
& lt; img src=" https://www.yisu.com/zixun/images/pic001.jpg " alt="比;
& lt;跨度id="面具"祝辞& lt;/span>
& lt;/div>
& lt; div id=癰ig_box”比;
& lt; img src=" https://www.yisu.com/zixun/images/pic01.jpg " alt="比;
& lt;/div>
& lt;/div>
& lt; div id=傲斜怼北?
& lt; ul>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/pic0001.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/pic0002.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/pic0003.jpg " alt="祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/pic0004.jpg " alt="祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/MyTools/MyTools.js "祝辞& lt;/script>
& lt; script>
窗口。addEventListener(“负载”,函数(ev) {//1。获取标签
var=myTools。(“盒子”),美元s_box=盒子。孩子[0],b_box=盒子。孩子们[1],面具=s_box.children [1];
var list_Lis=myTools。$(“列表”).getElementsByTagName(‘李’);
b_img=b_box.children [0];//2。监听鼠标进入小盒子
s_box。addEventListener(鼠标悬停,函数(evt) {//2.1显示隐藏内容
mask.style。显示=翱椤?
b_box.style。显示=翱椤?//2.2监听鼠标移动
s_box。addEventListener (mousemove,函数(evt1) {
var e=evt1 | | window.event;//2.3求出鼠标坐标
var pointX=e。pageX -盒子。offsetLeft——面具。offsetWidth * 0.5;
var尖=e。pageY -盒子。offsetTop——面具。offsetHeight * 0.5;//2.4边界碰撞检测
如果(pointX & lt;0){
pointX=0
}else if (pointX祝辞=s_box。offsetWidth——面具。offsetWidth - 2) {
pointX=s_box。offsetWidth——面具。offsetWidth - 2;
}
如果(尖& lt;0){
尖=0
如果(尖祝辞=s_box}其他。offsetHeight——面具。offsetHeight - 2) {
尖=s_box。offsetHeight——面具。offsetHeight - 2;
}//2.5让放大镜走起来
mask.style。左=pointX +“px”;
mask.style。顶级=尖+“px”;//2.6让大盒子中图片走起来/*
* smallX/bigX=sBox。宽/bBox.width
* bixX=smallX/(sBox。宽/bBox.width)
* */b_img.style。左=-pointX/(s_box.offsetWidth/b_box.offsetWidth) +“px”;
b_img.style。顶级=尖/(s_box.offsetHeight/b_box.offsetHeight) +“px”;
})
}）；//3。监听鼠标离开小盒子
s_box。addEventListener (mouseout,函数(evt) {//2.1隐藏内容
mask.style。显示='没有';
b_box.style。显示='没有';
}）；//4。李监听鼠标点击标签
(var=0;我& lt;list_Lis.length;我+ +){
(函数(i) {
李var=list_Lis[我];
李。addEventListener(鼠标悬停,函数(ev1) {
s_box.children [0]。src=" https://www.yisu.com/zixun/images/pic0 " + (i + 1) +“jpg”;
b_img。src=" https://www.yisu.com/zixun/images/pic0 " + (i + 1) +“jpg”;
}）；
})();
}
}）；
& lt;/script>
& lt;/body>
& lt;/html>
