一 html部分
const arr = [ { id: 1, small: '1.small.jpg', large: '1.large.jpg' }, { id: 2, small: '2.small.jpg', large: '2.large.jpg' }, { id: 3, small: '3.small.jpg', large: '3.large.jpg' }, ]; const oBox=document.querySelector('div'); const oGlassObj=new MyGlassObj(oBox,arr); oGlassObj.init(); window.addEventListener( 'resize' , function(){ // 当页面大小改变是 调用 实例化对象中 重新获取数据函数 oGlassObj.getSize(); })
二 导入的js文件部分
class MyGlassObj { constructor(element, mgarr) { this.ele = element; this.arr = mgarr; // 定义动态写入的函数 this.show; this.mask; this.list; this.glass; this.img; this.imgArr; this.marginLeft; this.marginTop; this.borderLeft; this.borderTop; this.showWidth; this.showHeight; this.maskWidth; this.maskHeight; } init() { this.setPage(); this.mouseShow(); this.mouseList(); this.mouseMove(); } // 定义动态写入函数 setPage() { this.show = document.createElement('div'); this.mask = document.createElement('div'); this.list = document.createElement('ul'); this.glass = document.createElement('div'); this.img = document.createElement('img'); // 给标签添加属性 this.show.classList.add('show'); this.mask.classList.add('mask'); this.list.classList.add('list'); this.glass.classList.add('glass'); // 给show里面的img添加src属性 this.img.setAttribute('src', `./images/${this.arr[0].large}`); // 给glass里面添加背景图片 this.glass.style.backgroundImage = `url(./images/${this.arr[0].large})`; // 给ul中的li写入进去 let ulliStr = ''; this.arr.forEach(function (item, key) { ulliStr += key === 0 ? `<li><img src="./images/${item.small}" class="active" index="${key}"></li>` : `<li><img src="./images/${item.small}" alt="" index='${key}'></li>` }) this.list.innerHTML = ulliStr; // 将这些标签都写入进obox当中 this.show.appendChild(this.img); this.show.appendChild(this.mask); this.ele.appendChild(this.show); this.ele.appendChild(this.glass); this.ele.appendChild(this.list); this.imgArr = this.list.querySelectorAll('img'); // 获取占位 // 外边距占位 this.marginLeft = this.ele.offsetLeft; this.marginTop = this.ele.offsetTop; // 边框线 this.borderLeft = this.show.clientLeft; this.borderTop = this.show.clientTop; // show占位 内容+padding this.showWidth = this.show.clientWidth; this.showHeight = this.show.clientHeight; // mask占位 内容是内容+padding+borde this.maskWidth = parseInt(window.getComputedStyle(this.mask).width); this.maskHeight = parseInt(window.getComputedStyle(this.mask).height); } // 定义鼠标移动时,glass和mask显示 mouseShow() { this.show.addEventListener('mouseenter', () => { this.mask.style.display = "block"; this.glass.style.display = "block"; }) this.show.addEventListener('mouseleave', () => { this.mask.style.display = "none"; this.glass.style.display = "none"; }) } // 当鼠标经过list时图片发生变化 mouseList() { this.list.addEventListener('mouseover', e => { if (e.target.tagName === "IMG") { this.imgArr.forEach(function (item, key) { item.classList.remove('active') }) e.target.classList.add('active'); this.img.setAttribute('src', `./images/${this.arr[Number(e.target.getAttribute('index'))].large}`); this.glass.style.backgroundImage = `url('./images/${this.arr[Number(e.target.getAttribute('index'))].large}')` } }) } mouseMove() { this.show.addEventListener('mousemove', e => { let x=e.pageX-this.marginLeft-this.borderLeft-this.maskWidth/2; let y=e.pageY-this.marginTop-this.borderTop-this.maskHeight/2; // 计算极值 x=x<0?0:x; y=y<0?0:y; x=x>this.showWidth-this.maskWidth?this.showWidth-this.maskWidth:x; y=y>this.showHeight-this.maskHeight?this.showWidth-this.maskHeight:y; this.mask.style.left=x+'px'; this.mask.style.top=y+'px'; this.glass.style.backgroundPosition=`${-x*4}px ${-y*4}px`; }) } getSize() { // 重新获取占位数据 // 外边距 this.marginLeft = this.ele.offsetLeft; this.marginTop = this.ele.offsetTop; // 边框线 this.borderLeft = this.show.clientLeft; this.borderTop = this.show.clientTop; // show占位 内容+padding this.showWidth = this.show.clientWidth; this.showHeight = this.show.clientHeight; // mask占位 内容+padding+border ; // mask默认是 none 隐藏 直接获取占位结果是 0; // 只能通过 css样式获取占位数值 内容+padding+border; this.maskWidth = parseInt(window.getComputedStyle(this.mask).width); this.maskHeight = parseInt(window.getComputedStyle(this.mask).height); } }