原生js實現圖片放大鏡效果

時間 2019-12-04

原文原文鏈接

放大鏡原理

放大鏡的實現過程是將一個小圖放置在一個盒子裏。寬高都是100%。當鼠標在小圖盒子裏移動時，出現一個移動塊(陰影區域)。右側大圖片盒子出現一個等比例放大的在小圖盒子移動塊中的圖片內容。如圖(請勿過於認真看圖片，注意圈圈(￢_￢))：javascript

必定要理解上圖中圈起來的陰影塊是箭頭指向的粉紅色圈的等比縮小版。理解了這個在接下來的代碼中，咱們才知道怎麼去計算右側大圖區域中的left、top值。也能夠說成陰影移動塊是模擬右側大圖盒子。右側大圖盒子中放置的是一張大的圖片，而後盒子設置成溢出隱藏。而咱們的移動塊也是，不在陰影塊中的內容，你均可以認爲是溢出隱藏掉了。css

當小圖盒子中的移動塊移動時，根據移動的距離去計算右側大圖盒子中圖片移動的座標。此時方便理解，你能夠想像成陰影塊是靜止的，是陰影塊下面的圖片在移動。因此，咱們須要計算出圖片向x軸、y軸移動了多少，根據等比例公式換算出右側大圖盒子中的圖片須要移動的座標值。html

代碼分析

htmljava

<!DOCTYPE html>
<html>
<head>
    <title>放大鏡</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="small">
        <img src="./fangdajing.png">
        <p id="move"></p>
    </div>
    <div id="big">
        <img src="./fangdajing.png" id="look_girl">
    </div>
</body>
</html>

cssthis

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            width: 960px;
            margin:40px auto;
        }
        #small{
            width: 300px;
            height: 200px;
            border:1px solid #eee;
            border-radius: 4px;
            position: relative;
        }

        #small img{
            width: 100%;
            height: 100%;
        }

        div    {
            float: left;
            margin-right: 10px;
        }

        #big{
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
            border:1px solid #eee;
            border-radius: 4px;
            display: none;
        }

        #look_girl{
            position: absolute;
            left: 0px;
            top:0px;
        }

        #move{
            width: 100px;
            height: 100px;
            background:#000;
            opacity: .5;
            position: absolute;
            display: none;
            left: 0px;
            top: 0px;
        }
    </style>

jsspa

<script type="text/javascript">
    var move = document.getElementById('move');    
    var small = document.getElementById('small');
    var big = document.getElementById('big');
    var look_girl = document.getElementById('look_girl');
    small.onmousemove = function(event){
        event = event || window.event;
        this.style.cursor = 'move';
        // 計算move移動塊的left值
        var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
        // 計算move移動塊的top值
        var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;
        // 超出左邊界賦值爲0
        move_left = move_left < 0 ? 0 : move_left;
        // 超出右邊界賦值爲盒子寬度-移動塊的寬度
        move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;
        // 超出上邊界賦值爲0
        move_top = move_top < 0 ? 0 : move_top;
        // 超出下邊界賦值爲盒子高度-移動塊高度
        move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;
        // 修改移動塊left、top值
        move.style.left = move_left + 'px';
        move.style.top = move_top + 'px';
        /*
            計算圖片須要移動的座標

            距離左邊left    圖片寬度      盒子寬度          距離左邊left    圖片寬度           盒子寬度
            big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);

            big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);

        */

        var big_x = move_left/(small.offsetWidth-move.offsetWidth) * (look_girl.offsetWidth-big.offsetWidth);
        var big_y = move_top/(small.offsetHeight-move.offsetHeight) * (look_girl.offsetHeight-big.offsetHeight);
        // 修改圖片定位
        look_girl.style.left = -big_x + 'px';
        look_girl.style.top = -big_y + 'px';
    }

    small.onmouseover = function(){
        move.style.display = 'block';
        big.style.display = 'block';
    }

    small.onmouseout = function(){
        move.style.display = 'none';
        big.style.display = 'none';
    }
</script>

移動塊行爲分析

當鼠標移動到小圖盒子中時，會出現移動塊（下圖陰影部分）咱們須要作的是移動塊位於鼠標的中間，且跟隨鼠標移動。固然了也不能溢出邊界。看圖說話(￢_￢)code

再看看代碼：htm

// 計算move移動塊的left值
var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
// 計算move移動塊的top值
var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;

ok，完美解決 ʅ（´◔౪◔）ʃseo

計算放大區域圖片left/top值

上面說過了，移動塊模擬的是放大區域。因此此時移動塊與放大區域的盒子，移動塊中的圖片大小與放大區域盒子圖片大小應該是成比例的。圖片

/*
    計算圖片須要移動的座標
    big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
    big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);
*/

var big_x = move_left/(small.offsetWidth-move.offsetWidth) * (look_girl.offsetWidth-big.offsetWidth);
var big_y = move_top/(small.offsetHeight-move.offsetHeight) * (look_girl.offsetHeight-big.offsetHeight);

此時小圖盒子的寬度（small.offsetWidth）正好是移動塊中圖片的寬度（認爲不在移動塊中顯式的圖片都溢出隱藏了）。而後就好像沒有什麼要解釋的了...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。