js模拟实现京东详情页图片放大效果
程序员文章站
2022-03-15 20:45:21
本文实例为大家分享了js实现京东详情页图片放大的具体代码,供大家参考,具体内容如下效果:html:
本文实例为大家分享了js实现京东详情页图片放大的具体代码,供大家参考,具体内容如下
效果:
html:
<div class="preview_img"> <img src="upload/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="upload/big.jpg" alt="" class="bigimg"> </div> </div>
css:
.preview_img { position: relative; height: 398px; border: 1px solid #ccc; } .mask { display: none; position: absolute; width: 300px; height: 300px; top: 0; left: 0; background: #fefe4f; opacity: .5; border: 1px solid #ccc; cursor: move; } .big { display: none; position: absolute; width: 550px; height: 550px; top: 0; left: 410px; z-index: 999; border: 1px solid #ccc; overflow: hidden; } .big img { position: absolute; left: 0; top: 0; }
js(重点):
window.addeventlistener('load',function(){ var preview_img = document.queryselector('.preview_img'); var mask = this.document.queryselector('.mask'); var big = this.document.queryselector('.big'); var bigimg = this.document.queryselector('.bigimg'); //鼠标经过 preview_img.addeventlistener('mouseover',function(){ mask.style.display = 'block'; big.style.display = 'block'; }) //鼠标移出去 preview_img.addeventlistener('mouseout',function(){ mask.style.display = 'none'; big.style.display = 'none'; }) //鼠标移动的时候 preview_img.addeventlistener('mousemove',function(e){ //鼠标在盒子内的坐标 var x = e.pagex - this.offsetleft; var y = e.pagey - this.offsettop; //遮挡层移动的距离 var maskx = x - mask.offsetwidth/2; var masky = y -mask.offsetheight/2; //大图移动距离 //遮挡层的最大移动距离 var maskmaxx = preview_img.offsetwidth - mask.offsetwidth; var maskmaxy = preview_img.offsetheight - mask.offsetheight; //如果x坐标小于0 就让它停留在0 的位置 if (maskx <= 0) { maskx = 0; }else if (maskx >= maskmaxx) { maskx = maskmaxx; } //如果y坐标小于0 就让它停留在0 的位置 if (masky <= 0) { masky = 0; }else if (masky >= maskmaxy) { masky = maskmaxy; } //遮挡层移动 mask.style.left = maskx + 'px'; mask.style.top = masky + 'px'; //大图片最大移动距离 var bigmaxx = bigimg.offsetwidth - big.offsetwidth; var bigmaxy = bigimg.offsetheight - big.offsetheight; //大图片的移动距离 x y // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离 var bigx = maskx * bigmaxx / maskmaxx; var bigy = masky * bigmaxy / maskmaxy; //大图和小图(鼠标移动)方向相反 bigimg.style.left = -bigx + 'px'; bigimg.style.top = -bigy + 'px'; }) })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。