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()