js面向对象实现放大镜效果

相信大家都见过某宝，某东或者一些其他的购物商城中的鼠标移入图片，移动放大图片的效果，今天咱就自己写一个，好了废话不多说，直接上代码！（这里使用一张图片的制作方式，大图缩小不影响图片的清晰度）
1.首先做一个基本样式布局以及css样式
html布局
css样式

这里我使用的背景图制作大图显示的方式（直接使用img引入也可以），css及html就不过多叙述
注意：shade和midbox的大小比例必须等于big和背景图片大小的比例，比例不一致会影响背景图片移动距离，从而导致bug
2.js中先自定义一个构造函数，并实例化
3.获取html中需要用到的标签，并将其作为Enlage的一个个属性
解释：this指向的对象地址给pointer（这样使用pointer也能条用Enlage中的方法和属性），并将所有方法写在对象原型中
给midbox写一个鼠标滑入和滑出方法（箭头函数中的this指向的是上一层位置所指向的地址）ps：建议方法一个个写，以防止出错

这里注意：不能给mid写滑入滑出方法，不然会造成从中图快速滑入大图，大图不消失的bug
3.this.over方法

解释：鼠标滑入显示shade和big大图，再给midbox写鼠标移动事件，获取鼠标实时的相对于整个页面的坐标，因为要保证鼠标滑入后一定在shade的中间位置，所以要减去shade的宽的一半，而box的左间距以及上间距后，剩下的就是鼠标在midbox中的left值和top值，用if判断固定鼠标的左右上下的最大值和最小值，并赋值给shade的top和left
重点：最后计算鼠标相对于midbox移动的距离和midbox宽高的比例
并传出bigshow函数
4.大盒子背景图移动

（获取css属性值ie兼容写法：ele.currentStyle(属性)）
这里获取到的背景图大小是两个字符串，得把他们变成数组，并得到纯数字的值后，（乘以传入移动比例），最后赋值给背景定位的x和y（因为shade的移动和背景图的移动方向相反，得给负号）
5.鼠标点击切换图片

解释：获取当前点击img图片的src值的后4个字符（1.jpg），并将其给背景图片的后四位字符即可（就不过多解释了）
6，鼠标滑出大图片消失，shade消失

这样就完成了，上效果图