DOM-20【电商网站商品图片放大镜效果】

一、电商网站商品图片放大镜效果

（1）图片放大镜效果

点击查看源代码

二、备注

（1）让鼠标在盒子中间移动

x: pagePos(e).X - imgX - magWidth / 2,
y: pagePos(e).Y - imgY - magHeight / 2

（2）为什么这里在mouseover里面写mousemove

addEvent(oImgWrap, 'mouseover', function (e) {
    addEvent(document, 'mousemove', mouseMove);
})

因为因为要鼠标进去了再触发鼠标移动事件

（3）为什么会一跳一跳的？

因为mouseover只会触发一次，所以等你离开了小盒子进入大盒子会再次触发

触发过程：
1、鼠标进入大盒子触发一次，显示小盒子

2、鼠标出现在小盒子上面，会再次冒泡触发事件