放大镜效果图如下:
2个比例核心:
右侧大图宽高设置
左侧展示图大小 / 遮罩层 = 右侧大图大小? / 右侧放大镜盒子
放大镜移动距离设置
遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | top / 右侧放大镜盒子宽高
html机构如下:
<div id="warper">
<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>
<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(){
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() {
let _this = this;
this.showEle.addEventListener('mouseover', function () {
_this.maskEle.style.display = 'block';
_this.scale()
})
this.showEle.addEventListener('mouseout', function () {
_this.maskEle.style.display = 'none';
})
this.showEle.addEventListener('mousemove',function(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';
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(){
_this.onclear()
this.classList.add('active')
_this.showImg.setAttribute('src',`./imgs/ying0${i+1}.jpg`)
_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()