时间:2021-07-01 10:21:17 帮助过:18人阅读
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/tools.js" type="text/javascript" charset="utf-8"></script> <script src="js/animate.js" type="text/javascript" charset="utf-8"></script> <style> *{margin: 0;padding:0} .mg{ height:577px; width:352px; margin-left: 100px; margin-top:100px; } ul{ height:68px; width:348px; display: flex; justify-content: space-between; position: absolute; left:0; top:0; } li{ list-style: none; float:left; border:2px solid white; } li img{ height:64px; width:50px; } li:hover{ border: 2px solid red; } .mg-1{ height:450px; width: 350px; margin-bottom: 10px; position:relative; } .mg-1>img{ height:450px; width:350px; } .ri{ height:540px; width:540px; position: absolute; left:372px; top:0; display: none; overflow: hidden; } .ri>img{ position: absolute; left:0; right:0; } .mask{ height:200px; width:200px; background: #FEDE4F; opacity:0.5; position: absolute; left:0; top:0; display: none; } .mg-1>p{ height:30px; width: 30px; position: absolute; bottom:0; right:0; } .mg-2{ height:68px; width:350px; margin-bottom:10px; position: relative; } i{ display: block; height:32px; width:22px; overflow: hidden; } .pre{ background: url(img/disabled-prev.png) no-repeat; position: absolute; left:0; top:50%; margin-top:-16px; cursor: pointer; } .next{ background: url(img/disabled-next.png) no-repeat; position: absolute; right:0; top:50%; margin-top:-16px; cursor: pointer; } .mid{ height:68px; width:290px; margin:0 auto; overflow: hidden; position: relative; } </style> </head> <body> <p class='mg'> <p class='mg-1'> <img class='imgx' src="img/1a.jpg" alt="" /> <p class='mask'></p> <p class="ri"><img class='imgd' src="img/5a601932N76367e55.jpg!cc_800x1026.jpg" alt="" /></p> <p><img src="img/sprite-magnify.png" alt="" /></p> </p> <p class="mg-2"> <i class='pre'></i> <p class='mid'> <ul class="list"> <li><a href="#"> <img src="img/5a601932N76367e55.jpg!cc_50x64.jpg"/></a></li> <li><a href="#"> <img src="img/5a601932N76367e55.jpg!cc_50x64.jpg"/></a></li> <li><a href="#"> <img src="img/5a601934N2b80ec89.jpg!cc_50x64.jpg"/></a></li> <li><a href="#"> <img src="img/5a601934N2b80ec89.jpg!cc_50x64.jpg"/></a></li> <li><a href="#"> <img src="img/59c35a89N2e519554.jpg!cc_50x64.jpg"/></a></li> <li><a href="#"> <img src="img/5a5f011fN971a30f5.jpg!cc_50x64.jpg"/></a></li> </ul> </p> <i class='next'></i> </p> </p> <script type="text/javascript"> window.onload=function(){ var imgdWidth=350/200*540; var imgdHeight=450/200*540; var imgx=document.getElementsByClassName('imgx')[0]; var imgd=document.getElementsByClassName('imgd')[0]; imgd.style.width=imgdWidth+'px'; imgd.style.height=imgdHeight+'px'; var mark=document.getElementsByClassName('mask')[0]; var mg1=document.getElementsByClassName('mg-1')[0]; var mg=document.getElementsByClassName('mg')[0]; var ri=document.getElementsByClassName('ri')[0]; mg1.onmouseenter=function(){ mark.style.display='block'; ri.style.display='block'; mg1.onmousemove=function(event){ var event=event||window.event; mark.style.left=event.pageX-100-mg.offsetLeft+'px'; mark.style.top=event.pageY-100-mg.offsetTop+'px'; if((event.pageX-100-mg.offsetLeft)<=0){ mark.style.left=0; }else if((event.pageX-100-mg.offsetLeft)>=150){ mark.style.left=150+'px'; } if((event.pageY-100-mg.offsetTop<=0)){ mark.style.top=0; }else if((event.pageY-100-mg.offsetTop>=250)){ mark.style.top=250+'px'; } imgd.style.left=-parseInt(mark.style.left)*540/200+'px'; imgd.style.top=-parseInt(mark.style.top)*540/200+'px'; } } mg1.onmouseleave=function(){ mark.style.display='none'; ri.style.display='none'; } var list=document.getElementsByClassName('list')[0]; var imgs=list.getElementsByTagName('img'); for(let i=0;i<imgs.length;i++){ imgs[i].onmouseover=function(){ imgx.src='img/'+(i+1)+'a.jpg'; } } var pre=document.getElementsByClassName('pre')[0]; var next=document.getElementsByClassName('next')[0]; var left=getStyle(list,'left'); pre.onclick=function(){ animate(list,{left:-60}); } next.onclick=function(){ animate(list,{left:0}); } } </script> </body> </html>
相关推荐:
javascript仿淘宝商品详情放大镜效果
如何用jquery做出放大镜效果
JavaScript实现简单放大镜效果代码
以上就是原声js实现放大镜效果的详细内容,更多请关注Gxl网其它相关文章!