js原生淘宝京东宝贝放大镜效果
程序员文章站
2022-07-05 10:34:06
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩、右边会有大图片局部图。 鼠标移动时右边的大图片也会局部移动。 : Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用。 ,`定位` :计算。 ......
js实现商城放大镜效果
效果:
- 鼠标放上去会有半透明遮罩、右边会有大图片局部图。
- 鼠标移动时右边的大图片也会局部移动。
技术点
:
event
event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用。
事件捕获
,定位
`难点``:计算。
**接下来是demo分享:
css部分:
* { margin: 0; padding: 0; } /* img { vertical-align: top; } */ .box { width: 350px; height: 350px; position: relative; border: 1px solid black; margin: 150px 0 0 300px; } .big { width: 450px; height: 450px; position: absolute; border: 1px solid black; left: 400px; top: 0; display: none; overflow: hidden; } .small { position: relative; } .mask { width: 100px; height: 100px; background-color: rgba(255, 255, 0, 0.4); position: absolute; left: 0; top: 0; cursor: move; display: none; } .big img { position: absolute; left: 0; top: 0; }
html结构部分:
<div class="box" id="obox"> <div class="small" id="osmall"> <img src="./images/001.jpg" alt=""> <div class="mask" id="omask"></div> </div> <div class="big" id="obig"> <img src="./images/0001.jpg" alt=""> </div> </div>
//第一步获取节点 let box = document.getelementbyid('obox'); let small = box.children[0]; //获取盒子的第一个子节点samll let big = box.children[1]; //获取盒子的第二个子节点big let mask = small.children[1]; //获取小盒子里的遮罩 let bigimg = big.children[0]; //获取大盒子里的图片 //鼠标进入small 遮罩(mask)大盒子(big)display:block small.onmouseover = function() { mask.style.display = 'block'; big.style.display = 'block'; }; //鼠标离开small 遮罩(mask)大盒子(big)display:none small.onmouseout = function() { mask.style.display = 'none'; big.style.display = 'none'; }; let x = 0; let y = 0; small.onmousemove = function(even) { var even = even || window.event; // 获取鼠标在small里的坐标 let x = even.clientx - this.offsetparent.offsetleft - mask.offsetwidth / 2; let y = even.clienty - this.offsetparent.offsettop - mask.offsetheight / 2; // 限制住鼠标的坐标导致遮罩的位置越界 if (x < 0) { x = 0; } else if (x > small.offsetwidth - mask.offsetwidth) { x = small.offsetwidth - mask.offsetwidth; } if (y < 0) { y = 0; } else if (y > small.offsetheight - mask.offsetheight) { y = small.offsetheight - mask.offsetheight; } mask.style.left = x + 'px'; mask.style.top = y + 'px'; //注意大图片的方向 bigimg.style.top = -y * big.offsetheight / small.offsetheight + 'px'; bigimg.style.left = -x * big.offsetwidth / small.offsetwidth + 'px'; };