您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“JavaScript如何實現(xiàn)仿淘寶放大鏡效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript如何實現(xiàn)仿淘寶放大鏡效果”這篇文章吧。
html代碼
<div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="original"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> </div> <script src="./index.js"></script>
css代碼
*{ margin: 0; padding: 0; } .thumbnail , .original{ width: 400px; height: 400px; border: 1px solid red; position: absolute; } .original{ left: 450px; overflow: hidden; display: none; } .thumbnail>img{ width: 400px; } .original>img{ width: 800px; position: absolute; } .magnifier{ cursor: move; width: 200px; height: 200px; background-color:rgba(206, 198, 198, 0.5); position: absolute; top: 0; left: 0; display: none; }
js代碼
// thumbnail 縮略圖 // original 原圖 // magnifier 放大鏡 $(".thumbnail").mouseover(function(){ $(".magnifier").show() $(".original").show() }) $(".thumbnail").mousemove(function(ev){ // console.log(ev) // 鼠標(biāo)相對頁面 x y 坐標(biāo) var mx= ev.pageX; var my =ev.pageY; var tx = mx - $(".thumbnail").offset().left var ty = my - $(".thumbnail").offset().top var l = tx -$(".magnifier").width()/2; var t = ty -$(".magnifier").height()/2; var maxX= $(".thumbnail").width() - $(".magnifier").width(); var maxY= $(".thumbnail").height() -$(".magnifier").height() // 處理邊界 if( l >maxX){ l = maxX } if( t >maxY){ t = maxY } if(l <0){ l =0 } if(t<0){ t=0 } //放大鏡位置 $(".magnifier").css({ left: l +"px", top : t + "px" }) //原圖位置 $(".original >img").css({ left:-l*2 +"px", top:-t*2 +"px" }) }) // 鼠標(biāo)離開 隱藏 放大鏡 ,原圖 $(".thumbnail").mouseout(function(){ $(".magnifier").hide(); $(".original").hide(); })
效果:
以上是“JavaScript如何實現(xiàn)仿淘寶放大鏡效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。