快捷導(dǎo)航

js實現(xiàn)購物網(wǎng)站放大鏡功能

更新時間：2021年06月30日 10:45:02 作者：404BAI

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)購物網(wǎng)站放大鏡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)購物網(wǎng)站放大鏡功能的具體代碼，供大家參考，具體內(nèi)容如下

首先看效果圖：

先是布局，左邊一個小圖框，包含一個鼠標(biāo)移動框，右邊一個放大框。

<div class="box">
        <div class="small">
            <img src="small3.jpg" alt="">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="big3.jpg" alt="">
        </div>
</div>

寫一下css

.small{
    position: relative;
    float: left;
    width: 450px;
    height: 450px;
    border:1px solid #000;
}
.small .move{
    position: absolute;
    top:0;
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,0.4);
    cursor:move;
    display: none;
}
.big{
    position: relative;
    float: left;
    width: 540px;
    height: 540px;
    margin-left: 20px;
    overflow: hidden;
    border:1px solid #000;
    display: none;
}
.big img{
    position: absolute;
    top:0;
    left: 0;
}

js部分：

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //首先把需要的元素都獲取出來
    small.onmouseover=function(){
        move.style.display='block';
        big.style.display="block";
    };
    small.onmouseout=function(){
        move.style.display='none';
        big.style.display="none";
    };
    small.onmousemove=function(e){
        e=e||window.event;//兼容性考慮
        var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>smallImg.offsetWidth-move.offsetWidth){
            x=smallImg.offsetWidth-move.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>smallImg.offsetHeight-move.offsetHeight){
            y=smallImg.offsetHeight-move.offsetHeight;
        }
        move.style.left=x+"px";
        move.style.top=y+"px";
        //實現(xiàn)左邊move塊跟隨鼠標(biāo)移動的代碼
        var scale=bigImg.offsetWidth/smallImg.offsetWidth;
        //按照比例放大
        bigImg.style.left='-'+x*scale+'px';
        //因為圖片是需要左移和上移的所以要加負(fù)號
        bigImg.style.top='-'+y*scale+'px';
    }

放大鏡效果就實現(xiàn)啦！