用JS实线放大镜的效果
今天花了点时间，复习了下使用原生JS实线放大镜的效果。在制作过程中，也是很到了一些问题，在这里总结下。
HTML代码如下：
1 <div id="preview"> 2 <div id="mediumDiv"> 3 <img id="mImg" src="images/products/product-s1-m.jpg"/>//这是中级图片层 4 <div id="mask"></div>//这是遮罩 5 <div id="superMask"></div>//这是超级遮罩，作用是鼠标进入，1. 显示遮罩区域和图片放大区域；2提供鼠标移动区域 6 </div> 7 <div id="largeDiv"></div>//图片放大区域； 8 <h1> 9 <a class="backward disabled"></a> 10 <a class="forward"></a>//这里注意类的书写，有类名后面有多余的空格容易导致出错，一定要注意。 11 <ul id="icon_list"> 12 <li><img src="images/products/product-s1.jpg" /></li> 13 <li><img src="images/products/product-s2.jpg" /></li> 14 <li><img src="images/products/product-s3.jpg" /></li> 15 <li><img src="images/products/product-s4.jpg" /></li> 16 <li><img src="images/products/product-s1.jpg" /></li> 17 <li><img src="images/products/product-s2.jpg" /></li> 18 <li><img src="images/products/product-s3.jpg" /></li> 19 <li><img src="images/products/product-s4.jpg" /></li> 20 </ul> 21 </h1> 22 </div>
CSS代码如下：
1 #preview {position:absolute;top:0;left: 0;width: 352px;} 2 #mediumDiv {border:1px solid #ddd;width: 350px;margin-bottom: 5px;text-align:center;position: relative;} 3 #mediumDiv img { vertical-align:middle;width:350px;height:350px;} 4 #mask {position:absolute;width: 175px;height: 175px;background: #ffa;opacity: 0.5; 5 top:0;left:0;display: none;} 6 #superMask {position: absolute;width: 350px;height: 350px;opacity: 0;left:0;top:0;cursor: move;} 7 #largeDiv {position: absolute;top:0;left:351px;width: 400px;height: 400px;border:1px solid #ddd;z-index: 3;background: #fff;display: none;} 8 #preview h1 {width: 352px;overflow: hidden;position:relative;height: 54px;} 9 #preview .backward ,#preview .forward{height: 54px;width: 17px;background-repeat: no-repeat;background: url(Images/iconlist_1.png);display: block;position: absolute; top:0;z-index: 1} 10 #preview .backward {background-position:0 -139px;left:0; } 11 #preview .forward {background-position: -17px -139px;right:0;} 12 #preview .backward:hover {background-position: -34px -139px;} 13 #preview .forward:hover {background-position: -51px -139px;} 14 #preview .backward.disabled {background-position: -68px -139px;} 15 #preview .forward.disabled {background-position: -85px -139px;} 16 #icon_list {position: absolute;left:25px;width: 496px;} 17 #icon_list li {float:left;border:1px solid #ddd;margin-right: 8px;width: 50px;height: 50px;text-align:center;padding:1px;} 18 #icon_list li:hover {border:2px solid #e4393c;padding:0;} 19 #icon_list li img {width: 100%;height: 100%;}
JS代码：
1 // 放大镜 2 (function(){ 3 const LIWIDTH = 62;//li的宽度 4 const OFFSET = 25;//ul的其实left 5 const MSIZE =175;//mask的大小 6 const SMIZE =350;//supermask的大小 7 var count = document.querySelectorAll('#icon_list>li').length,//li的个数 8 moved =0,//左移的个数； 9 aBackward = document.querySelector('#preview a.backward'),//按钮 10 aForward = document.querySelector('#preview a.forward');//按钮 11 aForward.addEventListener('click',move); 12 aBackward.addEventListener('click',move); 13 function move(){ 14 if (this.className.indexOf('disabled')==-1) {////如果当前a的class中没有disabled,这里是说没有disabled才移动，有disabled的话就不运行下面的 15 if (this.className =='forward') //代码 16 moved++; 17 else 18 moved--; 19 console.log(moved)//这里注意类的书写，如果类后面有多余的空格导致出错； 20 this.parentNode.lastElementChild.style.left = -moved*LIWIDTH+OFFSET+'px'; 21 if (moved==0) {aBackward.className +=' disabled';} 22 else if(moved == count-5) aForward.className +=' disabled'; 23 else { 24 aForward.className ='forward'; 25 aBackward.className='backward'; 26 } 27 } 28 } 29 var Image = document.getElementById('mImg'); 30 //为id为icon_list的ul绑定鼠标进入事件: 31 document.getElementById('icon_list').addEventListener('mouseover',function(e){ 32 if (e.target.nodeName.toLowerCase() =='img') {//此处利用冒泡事件，给每个img元素绑定了鼠标移入事件、 33 var src = e.target.src.split('.')[0]+'-m.jpg'; 34 Image.src = src; 35 36 } 37 }) 38 var sm=document.getElementById("superMask") 39 mask=document.getElementById("mask"), 40 lgDiv=document.getElementById("largeDiv"); 41 42 sm.addEventListener('mouseover',function(){ 43 mask.style.display="block"; 44 lgDiv.style.display="block"; 45 var src = Image.src; 46 var i = src.lastIndexOf('.'); 47 src = src.slice(0,i-1)+'l'+src.slice(i); 48 lgDiv.style.backgroundImage = 'url('+ src+')'; 49 }) 50 sm.addEventListener("mouseout", 51 function(){ 52 mask.style.display=""; 53 lgDiv.style.display=""; 54 } 55 ); 56 //为sm绑定鼠标移动事件 57 var MAX=SMIZE-MSIZE; 58 sm.addEventListener('mousemove',function(e){ 59 var x = e.offsetX,y = e.offsetY; 60 var top = y-MSIZE/2,left = x-MSIZE/2; 61 if(top <0) top =0; 62 else if(top >MAX) top =MAX; 63 if (left <0) left =0; 64 else if (left >MAX) left =MAX; 65 mask.style.cssText= 66 "display:block; left:"+left+"px; top:"+top+"px"; 67 lgDiv.style.backgroundPosition= 68 -left*16/7+"px "+ -top*16/7+"px"; 69 })
