原生JS实现京东商城同步放大镜功能

嘻嘻嘻，今天分享一下使用原生JS实现京东购物的放大镜功能，也就是鼠标移动到左侧商品小图，在右侧出现大图，并且实现同步。
原效果：京东商城

---

先搭建静态页面

html

css

//盛放小图的盒子
#box1{
    width: 180px;
    height: 180px;
    overflow: hidden;
    position: relative;
    left: 100px;
    cursor: move;
}
//小图上可拖动的滑块
#box1 span{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    opacity: .5;
    display: inline-block;
    top:0;
    left: 0;
    display: none;
}
//盛放大图的盒子
#box2{
    width: 500px;
    height: 500px;
    position: absolute;
    overflow: hidden;
    left: 350px;
    top:0;
}
#box2 img{ 
	position: absolute;
 	top:0; 
 	left: 0
 }

---

在写javascr之前，我们先捋一下思路，这个效果可以分解成三步。
一，鼠标悬停在box1上显示拖动块,移出box1时隐藏拖动块。
二，实现拖动块在box1上移动。
三，实现拖动块在box1上移动，大图也跟着一起同步移动。
思路有了，按照这个思路，我们一起来写一下吧。

---

先获取DOM

var box1 = document.getElementById("box1")//小盒子
var box2 = document.getElementById("box2")//大盒子
var oSpan = box1.getElementsByTagName("span")[0];//滑块
var oImg= box2.getElementsByTagName("img")[0];//大盒子里的大图片

---

box1的浮动事件

//box1的浮动事件
box1.onmouseover = function (ev) {
//第一步，滑块显示
    oSpan.style.display = "block";
    //然后，获取滑块距离窗口的左边和上边的距离
    var disx = ev.clientX;
    var disy = ev.clientY;
    //box1的鼠标移动事件
    box1.onmousemove = function (ev2) {
    	//获取事件对象
        var ev2 = ev2||window.event;
        //获取滑块左边框距离box1左边框的距离。也就等于鼠标相对于窗口左边的距离减去box1相对于窗口左边的距离再减去滑块宽度的一半。
        var L = ev2.clientX-box1.offsetLeft-oSpan.offsetWidth/2;
        //获取滑块上边框距离box1上边框的距离，原理同上
        var T = ev2.clientY-box1.offsetTop-oSpan.offsetHeight/2;
        //当距离小于0时，让它始终等于0，也就是滑块不会超出box1的范围。
        if(L<0) L=0;
        //当距离大于box1的宽减去滑块的宽的时候，限制滑块距离box1左边的的最大值。
        if(L>=box1.offsetWidth-oSpan.offsetWidth){
            L=box1.offsetWidth-oSpan.offsetWidth
        }
        //限制高度，原理同上
        if(T<0) T=0;
        if(T>=box1.offsetHeight-oSpan.offsetHeight){
            T=box1.offsetHeight-oSpan.offsetHeight
        }
        //设置滑块的位置，让其跟着鼠标移动，且鼠标始终在滑块的中心位置。
        oSpan.style.left = L+"px";
        oSpan.style.top = T+"px";
        //获取滑块和box1的的距离比例
        var scaleX = L/(box1.offsetWidth-oSpan.offsetWidth);
        var scaleY = T/(box1.offsetHeight-oSpan.offsetHeight);
        //设置右侧大图的左边定位距离。也就是滑块和box1的距离比乘以大图片的宽减去box2的值
        oImg.style.left = "-"+scaleX*(oImg.offsetWidth-box2.offsetWidth)+"px";
        设置右侧大图的高度定位距离。
        oImg.style.top =  "-"+scaleY*(oImg.offsetHeight-box2.offsetHeight)+"px";
    }
}

接下来设置一下鼠标移出时隐藏滑块

box1.onmouseout = function (ev) {
    box1.onmousemove = null;
    oSpan.style.display = "none";
}

上传不了本地demo，上个效果图吧：
嘻嘻嘻，以上，就是我的一个基本思路和实现的过程，欢迎大家指导。