JavaScript仿淘寶放大鏡效果
更新時間:2021年10月27日 10:04:56 作者:pure_lin7
這篇文章主要為大家詳細介紹了JavaScript仿淘寶放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)淘寶放大鏡效果的具體代碼,供大家參考,具體內(nèi)容如下
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) // 鼠標相對頁面 x y 坐標 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" }) }) // 鼠標離開 隱藏 放大鏡 ,原圖 $(".thumbnail").mouseout(function(){ $(".magnifier").hide(); $(".original").hide(); })
效果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)集合的交集、補集、差集、去重運算示例【ES5與ES6寫法】
這篇文章主要介紹了JS實現(xiàn)集合的交集、補集、差集、去重運算,結(jié)合實例形式分析了ES5與ES6語法環(huán)境下的集合常見運算操作技巧,需要的朋友可以參考下2019-02-02javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法
javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法,對于cookies操作不是很熟悉的朋友可以參考下。2010-06-06