當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
原生JS实现简单的淘宝放大镜效果
生活随笔
收集整理的這篇文章主要介紹了
原生JS实现简单的淘宝放大镜效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
大家經(jīng)常去淘寶買東西會發(fā)現(xiàn),淘寶上的放大鏡效果挺有意思的,這里簡單的實現(xiàn)了下,代碼中的圖片地址 親們可以自行更換;
<!DOCTYPE html> <html> <head><title>放大鏡</title><meta charset="utf-8" /><style type="text/css">*{margin: 0;padding: 0;}body{height: 2000px;}#wrapleft{width: 300px;height: 400px;background: skyblue;box-shadow: 2px 2px 2px 2px gray;position: absolute;left: 100px;top: 100px;}.smallg{width: 70px;height: 99px;float: left;margin-left: 5px;}.smallg img{width: 70px;height: 99px;}.smallg:hover{box-shadow: 2px 2px 2px 2px gray;}#bigg{width: 300px;height: 300px;position: relative;}#bigg img{width: 300px;height: 300px;}#MoverGlass{width: 100px;height: 100px;position: absolute;background-color: rgba(0,0,0,0.5);left: 0;top: 0;display: none;}#wrapright{width: 400px;height: 400px;position: absolute;display: none;background-color: yellowgreen;left: 420px;top: 100px;overflow: hidden;}#Myeye{width: 1200px;height: 1200px;position: absolute;left: 0;top: 0;display: block;}</style> </head> <body><div id="wrapleft"><div id="bigg"><img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg"><div id="MoverGlass"></div></div><div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg"></div><div class="smallg"><img src="https://gd1.alicdn.com/imgextra/i1/2621336145/TB2Vc3ogFXXXXX9XXXXXXXXXXXX_!!2621336145.jpg"></div><div class="smallg"><img src="https://img.alicdn.com/imgextra/i1/2621336145/TB22k_8gFXXXXXeXpXXXXXXXXXX_!!2621336145.jpg"></div><div class="smallg"><img src="https://img.alicdn.com/imgextra/i2/2621336145/TB2YSDHlpXXXXarXXXXXXXXXXXX_!!2621336145.jpg"></div></div><div id="wrapright"><img src="ihttps://img.alicdn.com/imgextra/i1/5/TB2JKUbpVXXXXacXXXXXXXXXXXX_!!5-0-yamato.jpg_210x1000q90.jpg" id="Myeye"></div> </body> </html> <script type="text/javascript">var smallg=document.getElementsByClassName('smallg');var MoverGlass=document.getElementById('MoverGlass');var bigg=document.getElementById("bigg");var biggimg=bigg.getElementsByTagName('img')[0];var wrapleft=document.getElementById("wrapleft");var wrapright=document.getElementById("wrapright");var Myeye=document.getElementById("Myeye");//小圖切換for(var i=0;i<smallg.length;i++){smallg[i].index=i;smallg[i].οnmοuseοver=function (){src=this.getElementsByTagName("img")[0].src;biggimg.src=src;Myeye.src=src;}}
//遮罩層和顯示層的顯示與否bigg.οnmοuseοver=function(){MoverGlass.style.display="block";wrapright.style.display="block";}bigg.οnmοuseοut=function(){MoverGlass.style.display="none";wrapright.style.display="none";}
//遮罩層運動bigg.οnmοusemοve=function(evt){var evt=event||evt;var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;var scrollLeft=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft;var x=evt.clientX+scrollLeft-wrapleft.offsetLeft-MoverGlass.offsetWidth/2; var y=evt.clientY+scrollTop-wrapleft.offsetTop-MoverGlass.offsetHeight/2;if(x<=0){x=0;}if(x>=bigg.offsetWidth-MoverGlass.offsetWidth){x=bigg.offsetWidth-MoverGlass.offsetWidth;}if(y<=0){y=0;}if(y>=bigg.offsetHeight-MoverGlass.offsetHeight){y=bigg.offsetHeight-MoverGlass.offsetHeight;}MoverGlass.style.left=x+"px";MoverGlass.style.top=y+"px";
//計算顯示層坐標(biāo)var b=MoverGlass.offsetLeft/MoverGlass.offsetWidth*wrapright.offsetWidth;var a=MoverGlass.offsetTop/MoverGlass.offsetHeight*wrapright.offsetHeight;Myeye.style.left=-b+"px";Myeye.style.top=-a+"px";} </script>
轉(zhuǎn)載于:https://www.cnblogs.com/luckychenchen/p/5624818.html
總結(jié)
以上是生活随笔為你收集整理的原生JS实现简单的淘宝放大镜效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： asp.net等项目编译失败的原因之不能
- 下一篇： 原创：姜子牙身为丞相，死后不久，周文王为