放大镜效果

在京东上买东西时，我们发现：当我们把鼠标放到商品图片的时候，图片的右边会出现一章反打的效果图。这边博客就是专门来写如何实现这个效果。
首先，看一下写完后的效果图：

一、布局

左边部分：
1、有一个div–smallBox将图片和遮罩层包裹在一起。
2、在smallBox中有两个元素，分别是img、div,那个浅黄色的遮罩层是放在一个div中
右边部分：
一个div–bigBox，里面有一张图片

布局其实非常简单，重点是在行为上。

二、样式

1、opacity：透明度，遮罩层颜色的深浅就是由这个样式来设置的，取值范围为0-1，数值越大，颜色越深。
2、display:标签是隐藏还是出现，如果为none，就是隐藏；为block，就是出现。
3、overflow:hidden；因为在这个案例中bigBox的大小比图片的大小要小，，所以我们希望溢出的部分就隐藏起来。
4、z-index: 10;如果为正值，那这个元素就浮在上层，为负值就浮在下层。因为大图需要动，所以需要为bigpic设置这个样式。在实践的过程中由于没有给大图设置样式，导致写完js后图片仍然不能移动。这是因为bigBox已经固定，图片的left和top都无法改变。
为大图设置的样式：

#bigBox img{
            width: 1200px;
            height: 750px;
            left: 200px;
            top: 200px;
            z-index: 10;
            position: absolute;
        }

开始时，我们应该做到遮罩层遮住的部分在大图那边也只显示那一部分，这个工作在写的过程中不是想象中的那么容易，调了很久，才调出来。主要是调整bigBox的大小比例。

三、js

鼠标进入：onmouseover
鼠标移动：onmousemove
鼠标移出：onmouseout
用到一个公式：（大图和小图移动的比例都是相同的）
left/(小图的宽度-遮罩层的宽度)=left1/(大图的宽度-大盒子的宽度)
这里要求的是left1:，所以根据公式将另外两个相乘即可。

<script>
            //先把所有的盒子都得到
            //小盒子
            var smallBox=document.getElementById("smallBox");
            //小盒子中的图片
            var smallPic=document.getElementById("smallPic");
            //遮罩层
            var floatBox=document.getElementById("floatBox");
            //大盒子
            var bigBox=document.getElementById("bigBox");
            //大盒子中的图片
            var bigPic=document.getElementById("bigPic");
            //console.log(bigPic);
            //当鼠标进入小盒子的时候  遮罩层和大图片就应该显示出来
            smallBox.onmouseover=function(){
              floatBox.style.display="block";
              bigBox.style.display="block";
              smallBox.style.cursor="move";
            }
            //当鼠标移出小盒子的时候  遮罩层和大图片就不显示
            smallBox.onmouseout=function(){
              floatBox.style.display="none";
              bigBox.style.display="none";
            }
            //鼠标移动事件
            smallBox.onmousemove=function(e){
                var left=e.clientX-floatBox.offsetWidth/2;
                var top=e.clientY-floatBox.offsetHeight/2;
                //得到小图片和遮罩层的offsetWidth  和offsetHeight
                var sw=smallPic.offsetWidth;
                var sh=smallBox.offsetHeight;
                var fw=floatBox.offsetWidth;
                var fh=floatBox.offsetHeight;
                if(left<0){
                    left=0
                }
                if(left>sw-fw){
                    left=sw-fw;
                }
                if(top<0){
                    top=0
                }
                if(top>sh-fh){
                    top=sh-fh
                }               
                //var bili=left/(sw-fw)
                floatBox.style.left=left+"px";
                floatBox.style.top=top+"px";
                //右边图片的移动   left/(sw-fw)=left1/(picw-bw)     
                proportion1=left/(sw-fw);
                proportion2=top/(sh-fh);
                //bigBox.style.background="deeppink";
                //由于遮罩层向左移的时候，大图应该向右移，所以要加上一个负号
                bigPic.style.left=-proportion1*(bigPic.offsetWidth-bigBox.offsetWidth)+"px"
                bigPic.style.top=-proportion2*(bigPic.offsetHeight-bigBox.offsetHeight)+"px"
            }
        </script>