结果如淘宝、京东这些电商购物时，检察图片的放大结果。

思绪：

1. 先把右侧的大图和左侧小图内里的方块隐蔽

2. 当鼠标移入左侧的smallPic，显现其内里的小方块和右侧的bigPic

3. 当鼠标挪动内里的小方块，右侧的bigPic显现图片对应的位置

4. 小方块挪动的局限在其父级smallPic的局限内

5. 当鼠标smallPic后，bigPic和smallPic内里的小方块隐蔽

6. 用到的要领主要由定位、溢出隐蔽、事宜对象

html规划：

//左侧小图
<div id='smallPic'>
    <img src='img/01.jpg'>
    <div></div>//挪动方块
</div>
//右侧大图
<div id='bigPic'>
    <img src='img/01.jpg'>//途径自行设置
</div>

CSS款式：

#smallPic{
    width:200px;
    height:200px;
    position:relative;
    float:left;
}
#smallPic img{
    width:200px;
    height:200px;
}
#smallPic div{
    width:80px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:yellowgreen;
    opacity:0.5;
    cursor:move;
    display:none;
}
#bigPic{
    width:800px;
    height:800px;
    float:left;
    position:relative;
    display：none；
    overflow：hidden；
}
#bigPic img{
    position:absolute;
    top:0;
    left:0;
}

js代码

window.onload=function(){
    var smallPic=document.getElementById('smallPic');
    var div=document.querySelector('.smallPic div');
    var bigPic=document.getElementById('bigPic');
    var bigPicImg=document.querySelector('.bigPic img');
    
    //鼠标移入smallPic显现div和bigPic
    smallPic.onmouseover=function(){
        div.style.display='block';
        bigPic.style.display='block';
    }
    //当鼠标在smallPic内里挪动时
    smallPic.onmousemove=function(ev){
        //设置两个变量，该变量的值得作用是在后面使鼠标在小方块中心及设置相干挪动局限
        var x=ev.clientX-div.offsetWidth/2-small.offsetLeft;
        var y=ev.clientY-div.offsetHeight/2-small.offsetTop;
       
       //推断小方块的挪动局限，并限定其在其父级局限内
       //x轴
       if(x<0){
           x=0;
       }else if(x>smallPic.offsetWidth-div.offsetWidth){
           x=smallPic.offsetWidth-div.offsetWidth;
       }
       //y轴
       if(y<0){
           y=0;
       }else if(y>smallPic.offsetHeight-div.offsetHeight){
           y=smallPic.offsetHeight-div.offsetHeight;
       }
       
       //小方块挪动
       div.style.left=x+'px';
       div.style.top=y+'px';
       
       //设置小方块在其父级局限内挪动的百分比
       var scaleX=x/(smallPic.offsetWidth-div.offsetWidth);
       var scaleY=y/(smallPic.offsetHeight-div.offsetHeight);
       
       //依据小方块挪动的百分比来挪动bigPic内里的图片的位置
       bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+'px';
       bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+'px';
    }
    
    //鼠标移出smallPic隐蔽div和bigPic
    smallPic.onmouseout=function(){
        div.style.display='none';
        bigPic.style.display='none';
    }
}