放大镜效果

html：

<div id="wrap">
    <img src="imgs/2.jpg" id="small">
    <div id="move"></div>
    <div id="bigPic">
        <img src="./imgs/2.jpg" id="bigImg">
    </div>
</div>
<div id="box">
    <ul>
        <li>
            <img src="./imgs/2.jpg">
        </li>
        <li>
            <img src="./imgs/3.jpg">
        </li>
        <li>
            <img src="./imgs/4.jpg">
        </li>
        <li>
            <img src="./imgs/5.jpg">
        </li>
    </ul>
</div>

css：

*{
    padding:0;
    margin:0;
}
#wrap{
    width:400px;
    height:400px;
    background:pink;
    margin-top:80px;
    margin-left:100px;
    border:1px solid #ccc;
    position:relative;
}
#wrap #small{
    width:100%;
    display:block;
}
#move{
    width:160px;
    height:160px;
    background:rgba(255,242,0,0.3);
    position:absolute;
    top:0;
    left:0;
    display:none;
}
#bigPic{
    width:400px;
    height:400px;
    position:absolute;
    top:0;
    left:400px;
    border:1px solid #ccc;
    margin-left:10px;
    overflow:hidden;
    display:none;
}
#bigImg{
    position:absolute;
}
#box{
    width:400px;
    height:100px;
    margin-top:5px;
    margin-left:100px;
}
#box li{
    width:100px;
    height:100px;
    list-style:none;
    float:left;
}
li img{
    width:100%;
}

js：

window.onload = function(){
//    获取小图外div
    var wrap = document.getElementById("wrap");
//    获取小图；
    var smallImg = document.getElementById("small");
//    获取大图外div
    var bigPic = document.getElementById("bigPic");
//    获取大图；
    var bigImg = document.getElementById("bigImg");
//    获取move
    var move = document.getElementById("move");
//刚开始move和大图是隐藏的；
    wrap.onmouseover = function(){
        move.style.display = "block";
        bigPic.style.display = "block";
    }
    wrap.onmouseout = function(){
        move.style.display = "none";
        bigPic.style.display = "none";
    }
    bigPic.onmouseover = function(){
        move.style.display = "none";
        bigPic.style.display = "none";
    }


//实现效果：鼠标在大图上移动，move跟随；
    wrap.onmousemove = function(e){
        var e = e || window.event;
        var newLeft = e.clientX - wrap.offsetLeft - move.offsetWidth/2;
        var newTop = e.clientY - wrap.offsetTop - move.offsetHeight/2;
        //临界值；
        var maxLeft = wrap.offsetWidth-1 - move.offsetWidth;
        var maxTop = wrap.offsetHeight - move.offsetHeight;
        //横向临界值
        if(newLeft >= maxLeft){
            newLeft = maxLeft;
        }
        if(newLeft <= 0){
            newLeft = 0;
        }
        //纵向临界值；
        if(newTop >= maxTop){
            newTop = maxTop
        }
        if(newTop <= 0){
            newTop = 0;
        }
        //大图和小图的联系是：
        //     小图左偏移/小图宽 = 大图左偏移/大图宽   现在求大图左偏移
        var newBigLeft = newLeft*bigImg.offsetWidth/smallImg.offsetWidth;
        var newBigTop = newTop*bigImg.offsetHeight/smallImg.offsetHeight;
        bigImg.style.left = -newBigLeft + "px";
        bigImg.style.top = -newBigTop + "px";
        move.style.left = newLeft + "px";
        move.style.top = newTop + "px";
        move.style.cursor = "move";
    }


//    获取li外层的div元素；
    var oBox = document.getElementById("box");
    var oLis = oBox.getElementsByTagName("li");
    for(var i = 0;i<oLis.length;i++){
        oLis[i].onmouseover = function(){
            smallImg.src  = this.children[0].src;
            bigImg.src = this.children[0].src;
        }
    }
}