放大鏡實現步驟

1.獲取元素

2.實現滑鼠移上時顯示小方塊 和大圖

3.再新增中圖的移動事件 獲取滑鼠的座標付給小方塊 注意必須座標還要減去小方塊的寬高的一半 讓游標在中間顯示

4.實現大圖同比例的顯示 原理:游標移動的座標/大圖移動的座標=中圖的寬度/大圖的寬度 求的是大圖移動的游標 帶進數值即可

5.實現圖片切換 試著用閉包形式實現

html程式碼

<div id="box">
        <div id="small-box">
            <img src="imgs/pic001.jpg"/>
            <span id="mack"></span>
        </div>
        <div id="big-box">
            <img src="imgs/pic01.jpg" style="position:absolute; top:0;left:0"/>
        </div>
    </div>
    <div id="list">
        <img src="imgs/pic0001.jpg"/>
        <img src="imgs/pic0002.jpg"/>
        <img src="imgs/pic0003.jpg"/>
    </div>
 

css程式碼

 *{
            margin: 0;
            padding: 0;
            border:0;
            /*處理Img之間的間隙*/
            vertical-align: top;
        }
        #box{
            width: 350px;
            height: 350px;
            border:1px solid #ccc;
            margin: 20px;

            position: relative;
        }
        #big-box{
            width: 600px;
            height: 600px;
            border:1px solid #ccc;
            overflow: hidden;
            position: absolute;
            left: 360px;
            top: 0;
            display: none;
        }
        #mack{
            width: 100px;
            height: 100px;
            background:rgba(255,255,0,.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor:move;
            display: none;
        }
        #list{
            margin: 20px;
        }
        #list img{
            margin: 10px;
        }
 

js程式碼

 //獲取元素
        var oBox=document.querySelector('#box');
        var smallBox=oBox.children[0];
        var bigBox=oBox.children[1];
        var mack=smallBox.children[1];
        var bigImg=bigBox.children[0];
        var listImg=document.querySelector("#list").children;

        //監聽滑鼠移入的事件
        smallBox.onmouseover=function () {
            //標記和大圖顯示
            mack.style.display='block';
            bigBox.style.display='block';
            //新增滑鼠在中圖盒子裡移動的事件
            smallBox.onmousemove=function (event) {
                //獲取滑鼠離盒子的座標
                var e=event || window.event;
                var pointX=e.clientX-oBox.offsetLeft-mack.offsetWidth*0.5;
                var pointY=e.clientY-oBox.offsetTop-mack.offsetHeight*0.5;
                if(pointX<0){
                    pointX=0;
                }else if(pointX>=smallBox.offsetWidth-mack.offsetWidth){
                    pointX=smallBox.offsetWidth-mack.offsetWidth;
                }
                if(pointY<0){
                    pointY=0;
                }else if(pointY>=smallBox.offsetHeight-mack.offsetHeight){
                    pointY=smallBox.offsetHeight-mack.offsetHeight;
                }
                mack.style.left=pointX+'px';
                mack.style.top=pointY+'px';
                //游標移動是大圖的顯示 原理
                /*
                    小圖游標移動的位置/小圖的寬度=大圖移動的位置/大圖的寬度  跟課本地圖和真實地圖的比例比
                * */
                bigImg.style.left=-(pointX*bigImg.offsetWidth)/smallBox.offsetWidth+'px';
                bigImg.style.top=-(pointX*bigImg.offsetHeight)/smallBox.offsetHeight+'px';
            }
            //滑鼠移開盒子消失
            smallBox.onmouseout=function () {
                mack.style.display='none';
                bigBox.style.display='none';
            }
            //切換圖片事件
            for(var i=0;i<listImg.length;i++){
                (function (i) {
                    listImg[i].onmouseover=function () {
                        smallBox.children[0].src="imgs/pic00"+(i+1)+".jpg";
                        bigImg.src="imgs/pic0"+(i+1)+".jpg";
                    }
                })(i)
            }
        }
        
 

總結：考察event事件物件，clientX和clientY的運用 以及比例：書本地圖與真實地圖的比例值
小圖游標移動的位置/小圖的寬度=大圖移動的位置/大圖的寬度