题九:放大镜效果
要求:
1.鼠标移至图片上方,鼠标周围出现黄色的的正方形框,黄色矩形 框会随着鼠标的移动而移动;
2.将黄色正方形框里的内容的长和宽均放大2.4倍,并在图片右边进 行显示。
原理:
-
首先把要放大的图片先size*2.4倍,位置要从零开始,绑定事件mousemove一定不要写错。
-
定位鼠标在视口的位置,在减去图片离视口的位置,就是鼠标在图片中的位置,高度的话还要减去滚动卷去的高度。
-
最后在图片的范围内,实现放大效果(加-才能网正方向去)
Document
题九:放大镜效果
要求:
1.鼠标移至图片上方,鼠标周围出现黄色的的正方形框,黄色矩形 框会随着鼠标的移动而移动;
2.将黄色正方形框里的内容的长和宽均放大2.4倍,并在图片右边进 行显示。
原理:
首先把要放大的图片先size*2.4倍,位置要从零开始,绑定事件mousemove一定不要写错。
定位鼠标在视口的位置,在减去图片离视口的位置,就是鼠标在图片中的位置,高度的话还要减去滚动卷去的高度。
最后在图片的范围内,实现放大效果(加-才能网正方向去)