JavaScript如何制作放大鏡效果

JavaScript如何制作放大鏡效果？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

實現原理：使用2個div，里面分別放大圖片和小圖片，在小圖片上應該還有一個遮罩層，通過定位遮罩層的位置來定位大圖片的相對位置，而且，遮罩層的移動應該和大圖片的移動方向相反

關鍵： 大圖片和小圖片大小比例應該和遮罩層的大小和放大顯示區域的比例相同；

難點： 計算遮罩層來顯示相應大圖片的位置

話不多說直接看代碼

代碼

html：

<div id="small">
    <div id="pic1">
        <img src="62-130501163925.jpg" alt="">
    </div>
    <div id="mask"></div>
</div>
<div id="big">
    <div id="pic2">
        <img src="62-130501163925.jpg" alt="">
    </div>
</div>

css

#small{
    width: 500px;
    height: 312px;
    position: absolute;
    left: 20px;
    top: 20px;
}
#pic1{
    position: absolute;
    left: 0px;
    top: 0px;
}
#pic1 img{
    width: 100%;
    height: 100%;
}
#big{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 50px;
    top: 50px;
    border: 1px solid blue;
    overflow: hidden;
}
#pic2{
    width: 1000px;
    height: 625px;
    position: absolute;
    left: 0;
    top: 0;
}
#pic2 img{
    width: 100%;
    height: 100%;
}
#mask{
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.3;/*讓遮罩層看起來透明*/
    filter: alpha(opacity = 30);/*兼容不同的瀏覽器*/
    position: absolute;
    display: none;
}

js

window.onload = function(){//文檔內容加載完之后再執行
    //當鼠標移入小圖片，顯示遮罩層和放大的區域
    $('small').onmouseenter = function(){
        $('mask').style.display = 'block';
        $('big').style.display='block';
    }
        //鼠標移出時，隱藏遮罩層和放大的區域
    $('small').onmouseleave = function(){
        $('mask').style.display='none';
        $('big').style.display="none";
    }
    //鼠標移動
    $('small').onmousemove = function(ev){
        var e = ev || window.event;
        //計算鼠標的位置，并讓鼠標顯示在遮罩層的中間
        var l = e.clientX - $('small').offsetLeft - 50;
        var t = e.clientY - $('small').offsetTop -50;
        //別讓遮罩層移出圖片
        if(l <= 0){
            l = 0;
        }
        if(l >= 500 - 100){
            l = 400;
        }
        if(t <= 0){
            t = 0;
        }
        if(t >= 312 - 100){
            t = 212;
        }
        //遮罩層的移動
        $('mask').style.left = l + 'px';
        $('mask').style.top = t + 'px';
        //通過遮罩層移動，來計算出放大后圖片的顯示區域
        $("pic2").style.left = -$("mask").offsetLeft * 2 + 'px';
        $("pic2").style.top = -$("mask").offsetTop * 2 + 'px';
    }
}
//為了更容容易的獲取id
function $(id){
    return document.getElementById(id);
}

感謝各位的閱讀！看完上述內容，你們對JavaScript如何制作放大鏡效果大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。