js放大鏡效果

DDreach 發布于2019-08-01 16:57 / 1827人閱讀

效果如淘寶、京東這些電商購物時，查看圖片的放大效果。

思路：

先把右邊的大圖和左邊小圖里面的方塊隱藏

當鼠標移入左邊的smallPic，顯示其里面的小方塊和右邊的bigPic

當鼠標移動里面的小方塊，右邊的bigPic顯示圖片對應的位置

小方塊移動的范圍在其父級smallPic的范圍內

當鼠標smallPic后，bigPic和smallPic里面的小方塊隱藏

用到的方法主要由定位、溢出隱藏、事件對象

html布局：

//左邊小圖

    
    //移動方塊

//右邊大圖

    //路徑自行設置

CSS樣式：

#smallPic{
    width:200px;
    height:200px;
    position:relative;
    float:left;
}
#smallPic img{
    width:200px;
    height:200px;
}
#smallPic div{
    width:80px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:yellowgreen;
    opacity:0.5;
    cursor:move;
    display:none;
}
#bigPic{
    width:800px;
    height:800px;
    float:left;
    position:relative;
    display：none；
    overflow：hidden；
}
#bigPic img{
    position:absolute;
    top:0;
    left:0;
}

js代碼

window.onload=function(){
    var smallPic=document.getElementById("smallPic");
    var div=document.querySelector(".smallPic div");
    var bigPic=document.getElementById("bigPic");
    var bigPicImg=document.querySelector(".bigPic img");
    
    //鼠標移入smallPic顯示div和bigPic
    smallPic.onmouseover=function(){
        div.style.display="block";
        bigPic.style.display="block";
    }
    //當鼠標在smallPic里面移動時
    smallPic.onmousemove=function(ev){
        //設置兩個變量，該變量的值得作用是在后面使鼠標在小方塊中間及設置相關移動范圍
        var x=ev.clientX-div.offsetWidth/2-small.offsetLeft;
        var y=ev.clientY-div.offsetHeight/2-small.offsetTop;
       
       //判斷小方塊的移動范圍，并限制其在其父級范圍內
       //x軸
       if(x<0){
           x=0;
       }else if(x>smallPic.offsetWidth-div.offsetWidth){
           x=smallPic.offsetWidth-div.offsetWidth;
       }
       //y軸
       if(y<0){
           y=0;
       }else if(y>smallPic.offsetHeight-div.offsetHeight){
           y=smallPic.offsetHeight-div.offsetHeight;
       }
       
       //小方塊移動
       div.style.left=x+"px";
       div.style.top=y+"px";
       
       //設置小方塊在其父級范圍內移動的百分比
       var scaleX=x/(smallPic.offsetWidth-div.offsetWidth);
       var scaleY=y/(smallPic.offsetHeight-div.offsetHeight);
       
       //根據小方塊移動的百分比來移動bigPic里面的圖片的位置
       bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+"px";
       bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+"px";
    }
    
    //鼠標移出smallPic隱藏div和bigPic
    smallPic.onmouseout=function(){
        div.style.display="none";
        bigPic.style.display="none";
    }
}

云服務器 GPU云服務器 js放大鏡效果 js放大鏡效果視頻 js實現放大鏡效果 js里面的放大鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50854.html

仿淘寶的放大鏡效果

摘要：本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜的小功能，實際上原理卻是非常的簡單，下面我們學習一下淘寶放大鏡效果是如何實現的。前言這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閑了一些，就趁這會閑工夫寫一篇文章。本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜...

wuyangnju 2019-08-20 18:14 評論0 收藏0
原生js實現簡單的放大鏡效果

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。前言：相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；（1）首先了解一下放大鏡效果的html架構：如...

lushan 2019-08-02 16:01 評論0 收藏0
原生js實現簡單的放大鏡效果

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。前言：相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；（1）首先了解一下放大鏡效果的html架構：如...

megatron 2019-08-30 14:16 評論0 收藏0
原生js實現簡單的放大鏡效果

摘要：接下來我們開始實現一下它吧首先了解一下放大鏡效果的架構如下圖，它由兩部分組成。第一部分的原理是設置的為需要放大的圖片，同時背景的寬高為。然后通過移動的，來達到放大鏡的效果。不過這只是簡單的實現，還有使用實現的方法。前言：相信很多同學在瀏覽購物網站的時候都會用到過放大鏡的功能，這個功能在日常的網站也會經常用到。接下來我們開始實現一下它吧；（1）首先了解一下放大鏡效果的html架構：如...

chanjarster 2019-08-22 15:44 評論0 收藏0