javaScript实现放大镜效果
放大镜效果图如下:
2个比例核心: 右侧大图宽高设置 左侧展示图大小 / 遮罩层 = 右侧大图大小? / 右侧放大镜盒子 放大镜移动距离设置 遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | top / 右侧放大镜盒子宽高
html机构如下:
<!-- 1.外围盒子 --> <div id="warper"> <!-- 2.左侧展示图 --> <div class="leftShow"> <div class="show"> <img src="./imgs/ying01.jpg"> <div class="mask"></div> </div> <ul> <li><a href=""><img src="./imgs/ying01.jpg" alt=""></a></li> <li><a href=""><img src="./imgs/ying02.jpg" alt=""></a></li> <li><a href=""><img src="./imgs/ying03.jpg" alt=""></a></li> <li><a href=""><img src="./imgs/ying04.jpg" alt=""></a></li> </ul> </div> <!-- 3.右侧放大图 --> <div class="rightGlass"> <img src="./imgs/ying01.jpg" alt=""> </div> </div>
css样式
* { padding: 0; margin: 0; } .active { border: 1px solid red; } #warper { width: 900px; margin: 100px; overflow: hidden; } #warper .leftShow { width: 400px; height: 400px; float: left; } #warper .leftShow .show { width: 400px; height: 350px; position: relative; } #warper .leftShow .show img { width: 100%; height: 100%; } #warper .leftShow .show .mask { width: 100px; height: 100px; background: rgba(252, 206, 214, 0.5); position: absolute; top: 0; left: 0; display: none; pointer-events: none; } #warper .leftShow ul { display: flex; justify-content: space-between; align-items: center; } #warper .leftShow ul li { list-style: none; float: left; width: 50px; height: 50px; } #warper .leftShow ul li a img { width: 100%; height: 100%; } #warper .rightGlass { width: 400px; height: 400px; float: right; overflow: hidden; position: relative; } #warper .rightGlass img { position: absolute; top: 0; left: 0; }
javaScript:
class Glass { constructor(id) { this.rootEle = document.querySelector(id) this.showEle = this.rootEle.querySelector('.show') this.showImg = this.rootEle.querySelector('.show img') this.maskEle = this.rootEle.querySelector('.mask') this.rightGlass = this.rootEle.querySelector('.rightGlass') this.rightImg = this.rootEle.querySelector('.rightGlass img') this.ulEles = this.rootEle.querySelectorAll('ul li') } scale(){ //注意:遮罩层mask出现后调用此方法才有效 //showEle宽高 / maskEle宽高 = rightImg宽高?? /rightGlass宽高 let width = this.showEle.offsetWidth / this.maskEle.offsetWidth * this.rightGlass.offsetWidth let height = this.showEle.offsetHeight / this.maskEle.offsetHeight * this.rightGlass.offsetHeight this.rightImg.style.width = width + 'px' this.rightImg.style.height = height + 'px' } onGlass() { // 保存this=>事件函数中会改变this指向 let _this = this; // 1.鼠标移入showEle,mask遮罩显示 this.showEle.addEventListener('mouseover', function () { //行内样式设置 _this.maskEle.style.display = 'block'; _this.scale() }) // 2.鼠标移出showEle,mask遮罩隐藏 this.showEle.addEventListener('mouseout', function () { _this.maskEle.style.display = 'none'; }) // 3.鼠标在showEle移动,获得鼠标位置 this.showEle.addEventListener('mousemove',function(e){ //e兼容性设置 e = e || window.event; let left = e.offsetX - _this.maskEle.offsetWidth/2; let top = e.offsetY -_this.maskEle.offsetWidth/2; //边界检测 if(left<0){ left = 0; } if(left > _this.showEle.offsetWidth - _this.maskEle.offsetWidth){ left = _this.showEle.offsetWidth - _this.maskEle.offsetWidth } if(top<0){ top = 0; } if(top > _this.showEle.offsetHeight - _this.maskEle.offsetHeight){ top = _this.showEle.offsetHeight - _this.maskEle.offsetHeight } //光标位置赋值给遮罩层 _this.maskEle.style.left = left + 'px'; _this.maskEle.style.top = top + 'px'; //left / mask宽 = rightImgLeft?? / rightGlass宽 let glassLeft = left / _this.maskEle.offsetWidth * _this.rightGlass.offsetWidth let glassTop = top / _this.maskEle.offsetHeight * _this.rightGlass.offsetHeight _this.rightImg.style.top = -glassTop + 'px' _this.rightImg.style.left = -glassLeft + 'px' }) } ontab(){ let _this = this; for(let i=0;i<this.ulEles.length;i++){ this.ulEles[i].addEventListener('mouseover',function(){ //清除所有li样式 _this.onclear() //选中li设置样式 this.classList.add('active') //showImg图片更换 _this.showImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`) //rightImg _this.rightImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`) }) } } onclear(){ for(let i=0;i<this.ulEles.length;i++){ this.ulEles[i].classList.remove('active') } } } let glass = new Glass("#warper") glass.onGlass() glass.ontab()