js放大镜效果

效果如淘宝、京东这些电商购物时，查看图片的放大效果。

思路：

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';
    }
}