放大鏡：onmousemove版 京東、淘寶版

前端小鐵人發表於2019-10-17

###之前關於放大鏡的文章【onmousedown\onmousemove\onmouseenter版】，我仔細看了一個各大電商網站，其實都不是這個樣子。而且這個版本的比較麻煩。那麼今天就給大家帶來單純的onmousemove版的，更簡單，更值得你看~當你再次寫電商網站的時候絕對不慌！

放大鏡：onmousemove版 京東、淘寶版（原生js）

對，我就是這麼的愛玩原生js~.

雖是效果不同，但是實現放大鏡的思路是一樣的。為了大家方便理解，我把HTML的結構也給大家寫出來，但是css還是需要大家自己去琢磨，去新增。我的目的是讓大家更好的理解編碼過程與案例思路，而不是想讓大家成為程式碼的搬運工。

<body>
    <div class="left">
        <img src="./imgs/small.jpg">
        <div class="square"></div>
        <div class="opacity"></div>
        <!-- 這是一個具有防抖功能的遮罩層 -->
    </div>

    <div class="right"></div>
    <script>
        //原生DOM節點的操作，萬變不離其中，先取到它
        var left = document.querySelector('.left');
        var square = document.querySelector('.square');
        left.onmousemove = function (evt) {
            //事件發生時，我們需要知道事件的相關資訊，事件資訊通常放在了事件物件中，事件處理函式的引數，就是事件物件，即上文的evt.
            var x = evt.offsetX;
            var y = evt.offsetY;
            //console.log(square.style.width)
            //注意：上文在輸出square是取不到square的width，因為我們之前設定的行內樣式，而不是內聯樣式。

            //我們需要取到游標的位置
            //我們要將游標的位置，與square的位置相關聯起來,並且設定游標的位置在square元素的正中心。
            x -= parseInt(getComputedStyle(square).width) / 2;
            y -= parseInt(getComputedStyle(square).height) / 2;
            //限制square元素的移動範圍，只在left中移動。
            if (x < 0) {
                x = 0
            }
            if (y < 0) {
                y = 0
            }
            if (x > parseInt(getComputedStyle(left).width) - parseInt(getComputedStyle(square).width)) {
                x = parseInt(getComputedStyle(left).width) - parseInt(getComputedStyle(square).width)
            }
            if (y > parseInt(getComputedStyle(left).height) - parseInt(getComputedStyle(square).height)) {
                y = parseInt(getComputedStyle(left).height) - parseInt(getComputedStyle(square).height)
            }
            square.style.left = x + 'px';
            square.style.top = y + 'px';

            //下面我們通過square的座標來設定右邊大圖的座標關係
            var right = document.querySelector('.right');
            right.style.backgroundPosition = `${x * -3}px ${y * -3}px`
            //從中我們可以看出在ES6中新加的模版字串是非常強大的應用，它是可以巢狀變數的。有了它真的給我們省了不少的麻煩。
            left.onmouseleave = function() {
                right.style.display = "none";
            }
        }
    </script>
</body>
![](https://user-gold-cdn.xitu.io/2019/10/17/16dd79281142ae22?w=270&h=179&f=jpeg&s=25808)
![](https://user-gold-cdn.xitu.io/2019/10/17/16dd792a5f901a41?w=1080&h=718&f=jpeg&s=307702)複製程式碼

相關文章