使用原生js实现仿淘宝放大镜效果

放大镜实现步骤

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的运用 以及比例：书本地图与真实地图的比例值
小图光标移动的位置/小图的宽度=大图移动的位置/大图的宽度