从小白的开始
请参考我的上传的资源：利用js来完成图片的放大，从小做起，希望能够和大家一起学习。
（1）、先设置好页面，定一个最外面的盒子div，盒子里面放好两个div,第一个div里面放多一个div和图片标签，另一个div里面放一个图片的标签。设置好样式
（2）、position的说明：有几个值----absolute、relative、static、fixed, absolute绝对位置，相对于父元素的绝对位置，fixed绝对位置，相对于浏览器窗口的绝对位置，relative相对位置，都可以通过top、left样式来设置定位元素左、上外边距边界与其包含块左边界之间的偏移量，但是唯独static不可以通过left、top样式来设置边距。
（3）、overflow：当元素溢出元素框的时候的处理的情况，其值可以为，hidden、visible、scroll、auto、inherit，hidden-->内容会被修剪，且其余部分是不可见的；visible--->默认值，内容不会被修剪，会呈现在元素框之外；scroll--->内容会被修剪，但是浏览器会显示滚动条以便来查看内容；auto---->如果内容被修剪，则浏览器会显示滚动条来以便查看内容；inherit--->规定元素从父元素那里遗传overflow属性。
（4）、cursor：设置鼠标光标的图形。
（5）获取最外层的div，且使用children[]方法来获取最外层div里面相应的组件，如div、img。
（6）、获取到里面的div--->small,给他注册鼠标事件onmouseenter，设置style.display的属性为block。
（7）、当鼠标离开里面的盒子时候，注册鼠标事件onmouseleave,设置style.display的属性为none。
（8）、当鼠标在盒子上移动的时候，给注册鼠标移动事件onmousemove，获取鼠标在盒子上面的坐标，var x=e.pageX-box.offsetLeft; var y=e.pageY-box.offsetTop; 鼠标在覆盖层的中点上，x-=mask.offsetWidth/2 y-=mask.offsetHeight/2; 判断覆盖层的坐标，始终在盒子上。
（9）、获取覆盖层移动的最大距离，ar maskX=small.offsetWidth-mask.offsetWidth; var maskY=small.offsetHeight-mask.offsetHeight; 并且判断是否超出盒子的范围。
（10）、显示对应的大图片、获取大图片最大的移动距离。
（11）var imgMaxX=big.children[0].offsetWidth-big.offsetWidth;
（12）var imgMaxY=big.children[0].offsetHeight-big.offsetHeight;
（13）var bigImgX=x*imgMaxX/maskX;
（14）var bigImgY=y*imgMaxY/maskY;
（15）big.children[0].style.left=-bigImgX+'px';
（16）big.children[0].style.top=-bigImgY+'px';
在浏览器上面的效果
