js放大鏡效果

Joonas 發(fā)布于2019-08-20 17:03 / 3240人閱讀

效果如淘寶、京東這些電商購(gòu)物時(shí)，查看圖片的放大效果。

思路：

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

當(dāng)鼠標(biāo)移入左邊的smallPic，顯示其里面的小方塊和右邊的bigPic

當(dāng)鼠標(biāo)移動(dòng)里面的小方塊，右邊的bigPic顯示圖片對(duì)應(yīng)的位置

小方塊移動(dòng)的范圍在其父級(jí)smallPic的范圍內(nèi)

當(dāng)鼠標(biāo)smallPic后，bigPic和smallPic里面的小方塊隱藏

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

html布局：

//左邊小圖

    
    //移動(dòng)方塊

//右邊大圖

    //路徑自行設(shè)置

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");
    
    //鼠標(biāo)移入smallPic顯示div和bigPic
    smallPic.onmouseover=function(){
        div.style.display="block";
        bigPic.style.display="block";
    }
    //當(dāng)鼠標(biāo)在smallPic里面移動(dòng)時(shí)
    smallPic.onmousemove=function(ev){
        //設(shè)置兩個(gè)變量，該變量的值得作用是在后面使鼠標(biāo)在小方塊中間及設(shè)置相關(guān)移動(dòng)范圍
        var x=ev.clientX-div.offsetWidth/2-small.offsetLeft;
        var y=ev.clientY-div.offsetHeight/2-small.offsetTop;
       
       //判斷小方塊的移動(dòng)范圍，并限制其在其父級(jí)范圍內(nèi)
       //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;
       }
       
       //小方塊移動(dòng)
       div.style.left=x+"px";
       div.style.top=y+"px";
       
       //設(shè)置小方塊在其父級(jí)范圍內(nèi)移動(dòng)的百分比
       var scaleX=x/(smallPic.offsetWidth-div.offsetWidth);
       var scaleY=y/(smallPic.offsetHeight-div.offsetHeight);
       
       //根據(jù)小方塊移動(dòng)的百分比來(lái)移動(dòng)bigPic里面的圖片的位置
       bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+"px";
       bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+"px";
    }
    
    //鼠標(biāo)移出smallPic隱藏div和bigPic
    smallPic.onmouseout=function(){
        div.style.display="none";
        bigPic.style.display="none";
    }
}