原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好。
<!DOCTYPEHTML> <html> <head> <title>js放大镜效果</title> <metahttp-equiv="content-type"content="text/html;charset=utf-8"/> <style> *{ margin:0px; padding:0px; border:none; list-style:none; } #box{ margin:80pxauto; width:352px; } #boxp { width:350px; height:350px; border:1pxsolid#ddd; margin-bottom:5px; } #boxpimg { width:350px; height:350px; } #boxh1 { width:352px; height:54px; overflow:hidden; position:relative; } #boxh1div { width:310px; height:54px; margin:0pxauto; position:relative; } #boxh1divul { position:absolute; left:0px; top:0px; } #boxh1ulli { width:62px; float:left; } #boxh1ulliimg { width:50px; height:50px; padding:1px; border:1pxsolid#CECFCE; } #boxh1img.hoveredThumb{ border:2pxsolid#e4393c; padding:0; } /*中等大小的图片显示区域*/ p#medImgBox{ position:relative; } #jing{ position:absolute; left:0; top:0; width:175px; height:175px; border-radius:50%; background:#ffd; opacity:0.7; display:none; } /*悬于图片/jing上方的专用于接收鼠标移动事件的 一个完全透明的层*/ #medImgBox#mian{ display:block; position:absolute; width:100%; height:100%; top:0; left:0; cursor:move; opacity:0; } /** 大图显示区域 **/ #largeImgBox{ position:absolute; width:175px; height:175px; border-radius:50%; border:1pxsolid#faa; top:0px; left:352px; overflow:hidden; display:none; } #largeImg{ display:none; position:absolute; } </style> </head> <body> <divid="box"> <pid="medImgBox"> <imgid="mediumImg"src="images/product-s1-m.jpg"/> <spanid="jing"></span> <spanid="mian"></span> <spanid="largeImgBox"> <imgid="largeImg"/> </span> </p> <h1> <div> <ulid="list"> <li><imgsrc="images\product-s1.jpg"/></li> <li><imgsrc="images\product-s2.jpg"/></li> <li><imgsrc="images\product-s3.jpg"/></li> <li><imgsrc="images\product-s4.jpg"/></li> <li><imgsrc="images\product-s1.jpg"/></li> </ul> </div> </h1> </div> <script> varimgList=document.querySelectorAll('#boxulliimg'); for(vari=0;i<imgList.length;i++){ varimg=imgList[i]; img.onmouseover=changeThumbImg; } functionchangeThumbImg(){ varpreviousHovered=document.querySelector('.hoveredThumb'); if(previousHovered==null){ this.className='hoveredThumb'; changeMediumImg(this.src);//修改中等图片的src }elseif(previousHovered!=this){ previousHovered.removeAttribute('class'); this.className='hoveredThumb'; changeMediumImg(this.src);//修改中等图片的src } } functionchangeMediumImg(thumbSrc){ vardotIndex=thumbSrc.lastIndexOf('.'); varprefix=thumbSrc.substring(0,dotIndex); varsuffix=thumbSrc.substring(dotIndex); varmediumSrc=prefix+'-m'+suffix; document.getElementById('mediumImg').src=mediumSrc; } /** 为放大镜jing添加鼠标移动事件 **/ document.querySelector('#mian').onmousemove= function(event){ varx=event.offsetX;//事件相对于事件源的偏移量 vary=event.offsetY; varjing=document.getElementById('jing'); varw=jing.offsetWidth;//jing的宽和高 varh=jing.offsetHeight; varleft=x<w/2?0:(x-w/2); vartop=y<h/2?0:(y-h/2); if(x>(w*2-w/2)){ left=w*2-w; } if(y>(h*2-h/2)){ top=h*2-h; } jing.style.left=left+'px'; jing.style.top=top+'px'; //修改大图的位置/ varlargeImg=document.getElementById('largeImg'); largeImg.style.left=(-left*largeImg.width/350)+'px'; largeImg.style.top=(-top*largeImg.height/350)+'px'; } document.querySelector('#mian').onmouseover=function(){ //显示jing varjing=document.getElementById('jing'); jing.style.display='block'; varlargeImgBox=document.getElementById('largeImgBox'); largeImgBox.style.display='block'; //获取当前要显示的大图的src varsrc=document.querySelector('#mediumImg').src; vardotIndex=src.lastIndexOf('.'); varprefix=src.substring(0,dotIndex-2); varsuffix=src.substring(dotIndex); src=prefix+'-l'+suffix; varlargeImg=document.getElementById('largeImg'); largeImg.src=src; largeImg.style.display='block'; } document.querySelector('#mian').onmouseout= function(){ //除去jing varjing=document.getElementById('jing'); jing.style.display='none'; //除去大图显示区 document.getElementById('largeImgBox').style.display='none'; } </script> </body> </html>
以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对毛票票网站的支持!