用webAPI實作圖片放大鏡的效果

實作圖片放大的效果
做這個之前需要會
事件物件.clientX 這個是X軸
事件物件.clientY 這個是Y軸

1. 元素.offsetLeft 獲取盒子距離瀏覽器的距離
2. 元素.offsetTop 獲取盒子距離瀏覽器頂部的距離

這兩個都是誰有定位我就看誰;

1. 元素.offsetWidth 獲取盒子的寬度
2. 元素.offsetHeight 獲取盒子的高度

我們要實作這樣的效果：

結構：
在做專案之前我們必須先知道哪些元素是需要獲取的：

圖片中我們可以看出 w是大盒子不需要獲取，leftBox 是我們需要獲取
黃盒子因為我們需要控制里面的盒子進行移動；
rightBox是放大后的盒子獲取；
里面的img也需要獲取，我們需要移動的是rightBox 里面的圖片而不是rightBox；

第一步：滑鼠進入顯示

onmouseenter是滑鼠進入的意思

，
當我滑鼠進入的時候在修改tool(小黃盒子的display屬性)和右邊盒子讓他進入就顯示

第二步：滑鼠離開的時候隱藏

onmouseleave是滑鼠離開的意思

同理當我們滑鼠離開的時候吧tool和右邊（rightBox）的大盒子給他隱藏掉.

第三步：滑鼠在左盒子移動黃盒子和右圖都要移動

onmousemove滑鼠在事件中移動的時候

e是事件物件，

• 先來看第一步，
• e.clicentX clicent是針對于瀏覽器而言，X代表水平方向
• e.clicentY 同理針對Y軸；

offsetLeft上面我們也說了，offsetLeft是針對有定位的屬性的距離，因為父盒子是body 有屬性position：state靜態定位
offsetTop是距離上面的的距離 如果不減去會變成這樣：

所以我們需要減去盒子距離左邊和上面的距離；

減去后：變成了這樣

接下來需要減去自身的一半就可以了

首先我們需要獲取黃色盒子的寬和高
offsetHeight獲取盒子的高度；
offsetWidth獲取盒子寬度；
接著就是出去他們自身的一半 / 2；

滑鼠就會在黃色盒子的中間顯示；
但是則會不是我們想要的效果；
我們不希望黃色的盒子超出leftBox盒子
這個時候我們就需要使用if進行判斷一下；

x < 0 來判斷是否到達了最左邊如果到達了最左邊吧0賦給x；
但是這樣我們右邊又會超出去這個時候我們需要判斷一下右邊的最大值；
x > 左邊盒子寬度?黃色的盒子就可以得到他一共可以移動多少距離；

同理上下也是這樣：

好了這樣我們的左側盒子就算做完了；
下面是實作右側放大盒子；

就這么兩行代碼

首先我們要先設定他的樣式，左側圖片大小正好是400px 右側盒子是800px
我們看到當我們在移動滑鼠的時候放大的圖片是反方向移動的所以我們在這里要添加（-）號取反 在哪這個去×他的x，y軸就可以放大圖片了

素材：

右側圖片

左側圖片

html代碼：

    <div class="w">
        <div class="fdj">
            <div class="leftBox" id="_leftBox">
                <!-- 小圖 -->
                <img src="img/m.jpg" alt=""/>
                <!-- 小黃盒子 -->
                <div class="tool" id="_tool"></div>
            </div>
            <div class="rightBox" id="_rightBox">
                <img id="_bImg" src="img/b.jpg" alt=""/>
            </div>
        </div>
    </div>

css代碼

* {
    margin:0;
    padding:0;
}

.w {
    width: 1190px;
    margin: 0 auto;

}
.fdj {
    margin-top: 20px;
}

.fdj .leftBox {
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    float: left;
    position: relative;
}

.fdj .tool {
    width: 250px;
    height: 250px;
    background:gold;
    opacity:.5;
    filter:alpha(opacity=50);
    position: absolute;
    top:0;
    left: 0;
    cursor: move;
    /* 默認隱藏 */
    display: none;

}
/* 給小黃加上active 就會顯示 */
.fdj .tool.active {
    display: block;
}

.fdj .rightBox {
    width: 500px;
    height: 500px;
    border:1px solid #ccc;
    float: left;
    overflow: hidden;
    /* 隱藏 */
    display: none;
    position: relative;
}
/* 加上active表示顯示 */
.fdj .rightBox.active {
    display: block;
}

.fdj .rightBox img {
    position: absolute;
}

js代碼：

   // 獲取元素
        var leftBox = document.getElementById('_leftBox')
        var tool = document.getElementById('_tool');
        var rightBox = document.getElementById('_rightBox');
        var bImg = document.getElementById('_bImg');
        // 1、滑鼠進入顯示
        leftBox.onmouseenter = function () {
            tool.style.display = 'block';
            rightBox.style.display = 'block';
        }
        // 2、滑鼠離開隱藏
        leftBox.onmouseleave = function () {
            tool.style.display = 'none';
            rightBox.style.display = 'none';
        }
        // 3、滑鼠在左盒子移動黃盒子和右圖都要移動
        leftBox.onmousemove = function (e) {
            // 修改黃盒子和右圖left和top
            // 把滑鼠的位置給黃盒子、獲取滑鼠位置
            var x = e.pageX - leftBox.offsetLeft - tool.offsetWidth / 2;
            var y = e.pageY - leftBox.offsetTop - tool.offsetHeight / 2;
            
            // 判斷距離
            if (x < 0) {
                x = 0;
            } else if (x > leftBox.offsetWidth - tool.offsetWidth) {
                x = leftBox.offsetWidth - tool.offsetWidth;
            }



            if (y < 0) {
                y = 0;
            } else if (y > leftBox.offsetHeight - tool.offsetHeight) {
                y = leftBox.offsetHeight - tool.offsetHeight;
            }
            
            // 設定給黃盒子
            tool.style.left = x + 'px';
            tool.style.top = y + 'px';

            // console.log(x, y);
            // // left和top
            bImg.style.left = -2 * x + 'px';
            bImg.style.top = -2 * y + 'px';