①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片
注意:左边盒子里面的cover采用绝对定位,右边盒子里面的img采用绝对定位。
②功能实现:主要有三个功能模块:
1.鼠标经过(mouseover)左边盒子,黄色的遮罩层以及右边盒子显示,鼠标离开(mouseout)则隐藏黄色遮罩层以及右边盒子。
2.黄色遮罩层跟随鼠标移动(mousemove)。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标,但是又因为鼠标是在遮罩层的中间,所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件:就是黄色遮罩层的移动距离,黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。
3.移动黄色遮罩层,大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算:
效果图如下: