欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)上傳圖片到服務器

    js實現(xiàn)上傳圖片到服務器

    這篇文章主要為大家詳細介紹了js實現(xiàn)上傳圖片到服務器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • canvas繪制一個常用的emoji表情

    canvas繪制一個常用的emoji表情

    本文主要介紹了canvas繪制一個常用的emoji表情的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-03-03
  • JavaScript This指向問題詳解

    JavaScript This指向問題詳解

    這篇文章主要介紹了JavaScript This指向問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-11-11
  • JS實現(xiàn)集合的交集、補集、差集、去重運算示例【ES5與ES6寫法】

    JS實現(xiàn)集合的交集、補集、差集、去重運算示例【ES5與ES6寫法】

    這篇文章主要介紹了JS實現(xiàn)集合的交集、補集、差集、去重運算,結(jié)合實例形式分析了ES5與ES6語法環(huán)境下的集合常見運算操作技巧,需要的朋友可以參考下
    2019-02-02
  • uniapp項目優(yōu)化方式及建議

    uniapp項目優(yōu)化方式及建議

    性能優(yōu)化自古以來就是重中之重,本文關(guān)于uniapp項目優(yōu)化方式最全整理,會根據(jù)開發(fā)情況進行補充,感興趣的可以了解一下
    2021-08-08
  • javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法

    javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法

    javascript cookie操作類的實現(xiàn)代碼小結(jié)附使用方法,對于cookies操作不是很熟悉的朋友可以參考下。
    2010-06-06
  • 微信小程序復選框組件使用詳解

    微信小程序復選框組件使用詳解

    這篇文章主要為大家詳細介紹了微信小程序復選框組件使用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • js面試題之異步問題的深入理解

    js面試題之異步問題的深入理解

    這篇文章主要給大家介紹了關(guān)于js面試題之異步問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • 解決URL地址中的中文亂碼問題的辦法

    解決URL地址中的中文亂碼問題的辦法

    這篇文章主要介紹了解決URL地址中的中文亂碼問題的辦法的相關(guān)資料,需要的朋友可以參考下
    2017-02-02
  • js和C# 時間日期格式轉(zhuǎn)換的簡單實例

    js和C# 時間日期格式轉(zhuǎn)換的簡單實例

    下面小編就為大家?guī)硪黄猨s和C# 時間日期格式轉(zhuǎn)換的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05

最新評論