本文主要和大家分享原声js实现放大镜效果，主要以代码的方式和大家分享，希望能帮助到大家。
nbsp;html>*{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;}
登录后复制
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)=150){mark.style.left=150+'px';}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});}}
相关推荐：
javascript仿淘宝商品详情放大镜效果
如何用jquery做出放大镜效果
JavaScript实现简单放大镜效果代码
以上就是原声js实现放大镜效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777870.html
