放大镜效果

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

一、布局

左边部分：

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>