javascript實現圖片放大鏡效果

阿新 • • 發佈：2019-01-16

當我們在電商網站上購買商品時，經常會看到這樣一種效果，當我們把滑鼠放到我們瀏覽的商品圖片上時，會出現類似放大鏡一樣的一定區域的放大效果，方便消費者觀察商品。今天我對這一技術，進行簡單實現，實現圖片放大鏡效果。
我在程式碼中進行了程式碼編寫的思路的說明和詳細的程式碼註釋，方便讀者，請看程式碼：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style 
 type="text/css">
            *{margin:0px; padding:0px;}
            .small-box {
                width:300px;
                height:300px;
                margin-left:100px;
                margin-top:100px;
                border:1px #ccc solid;
                cursor:move;
                float:left;
                position 
:relative;
            }
            .small-box img {
                width:300px;
                height:300px;
            }
            .tool {
                width:150px;
                height:150px;
                background-color:gold;
                opacity:0.6;
                filter:alpha(opacity=60 
);
                position:absolute;
                left:0px;
                top:0px;
                display:none;
            }
            .tool.active {
                display:block;
            }
            .big-box {
                width:300px;
                height:300px;
                border:1px #ccc solid;
                overflow:hidden;
                float:left;
                margin-top:100px;
                position:relative;
                display:none;
            }
            .big-box.active {
                display:block;
            }
            .big-box img {
                width:600px;
                height:600px;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="small-box" id="smallBox">
            <img src="img1.jpg"/>
            <div class="tool" id="tool"></div>
        </div>
        <div class="big-box" id="bigBox">
            <img src="img1.jpg" id="bigImg" />
        </div>
        <script>
            /*
                第一步：當頁面載入完後，獲取所要操作的節點物件。
                第二步：為smallBox新增一個滑鼠浮動事件
                            當滑鼠浮動到smallBox可視區域的時候，顯示出小黃盒子tool
                            和右邊的大盒子（小黃盒子的放大版）bigBox
                            新增active

                        為smallBox新增一個滑鼠離開事件
                            隱藏小黃盒子和右邊的大盒子
                            去掉active

                第三步：為smallBox新增一個滑鼠移動事件
                        小黃盒子tool要跟著滑鼠的座標移動
                        右邊的大盒子裡的圖片也跟著指定的比例移動
            */
            var smallBox = document.getElementById("smallBox");//小盒子
            var tool = document.getElementById("tool");//小盒子中的黃色區域
            var bigBox = document.getElementById("bigBox");//大盒子
            var bigImg = document.getElementById("bigImg");//放大的圖片
            //滑鼠進入小盒子區域內，顯示黃色區域和大盒子
            smallBox.onmouseenter = function(){
                tool.className = "tool active";
                bigBox.className = "big-box active";
            }
            //滑鼠離開小盒子區域，不顯示黃色區域和大盒子
            smallBox.onmouseleave = function(){
                tool.className = "tool";
                bigBox.className = "big-box";
            }
            //滑鼠在小盒子內移動
            smallBox.onmousemove = function(e){
                var _e = window.event||e;//事件物件
                var x = _e.clientX-this.offsetLeft-tool.offsetWidth/2;//事件物件在小盒子內的橫向偏移量
                var y = _e.clientY-this.offsetTop-tool.offsetHeight/2;//豎向偏移量
                if(x<0){
                    x = 0;//當左偏移出小盒子時，設為0
                }
                if(y<0){
                    y = 0;//當上偏移出小盒子時，設為0
                }
                if(x>this.offsetWidth-tool.offsetWidth){
                    x = this.offsetWidth-tool.offsetWidth;//當右偏移出小盒子時，設為小盒子的寬度-黃色放大區域寬度
                }
                if(y>this.offsetHeight-tool.offsetHeight){
                    y = this.offsetHeight-tool.offsetHeight;//當下偏移出小盒子時，設為小盒子的高度-黃色放大區域高度
                }
                tool.style.left = x + "px";//黃色放大區域距離小盒子左偏距
                tool.style.top = y + "px";//黃色放大區域距離小盒子上偏距
                bigImg.style.left = -x*2 + "px";//放大圖片移動方向相反，偏移距離加倍
                bigImg.style.top = -y*2 + "px";
            }
        </script>
    </body>
</html>

這裡，我並沒有對程式碼中css樣式，javascript行為進行和html結構的分離，方便讀者閱讀和執行。
有讀者可能考慮，獲取事件物件的偏移距離時直接使用offsetX和offsetY屬性，省去了計算，但是筆者在試驗時，出現了異常，黃色放大區域並不能穩定的隨著滑鼠進行移動，筆者認為，當時用offsetX和offsetY時，執行onmousemove會不斷地出發onmouseover，而onmouseover會產生事件傳播，從而導致在獲取offsetX時出現異常。最終，筆者採用上述程式碼中的方法，能夠出現穩定的效果。讀者可以自行執行程式碼，檢視效果。這裡附上筆者的效果圖：
這裡寫圖片描述

javascript實現圖片放大鏡效果

javascript實現圖片放大鏡效果

安卓實現圖片放大鏡效果

js實現圖片放大鏡效果

使用javascript實現圖片上下切換效果並且實現順序循環播放

JavaScript多張圖片放大鏡效果（不限定圖片尺寸，rem單位）

原生javascript實現圖片輪播效果

用原生js實現淘寶詳情頁圖片放大鏡效果

用css3的cursor:zoom-in/zoom-out實現微博看圖片放大鏡效果

JS實例之圖片輪播，實現圖片播放效果

JS實現圖片滾動效果

jquery實現圖片放大效果

原生JS實現圖片放大鏡插件

javascript實現彈層效果

原生js實現圖片抖動效果

Javascript實現圖片點擊彈出

javascript實現圖片實時預覽的兩種方式

圖片放大鏡效果

javascript實現圖片上傳實時顯示上傳圖片

原生javascript實現分頁效果+搜尋功能

利用bootstrap實現圖片Carousel效果

javascript實現圖片放大鏡效果

相關推薦