JS实现电商商品展示放大镜特效

更新时间：2020-09-28 22:36:01 作者：startmvc

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。