前端小白之实现放大镜效果

放大镜实现步骤

1.获取元素

2.实现鼠标移上时显示小方块  和大图 

3.再添加中图的移动事件  获取鼠标的坐标付给小方块  注意必须坐标还要减去小方块的宽高的一半  让光标在中间显示 

4.实现大图同比例的显示 原理:光标移动的坐标/大图移动的坐标=中图的宽度/大图的宽度  求的是大图移动的光标  带进数值即可

5.实现图片切换  试着用闭包形式实现

效果

代码如下

html

css

css

js

js

js

总结：考察event事件对象，clientX和clientY的运用  以及比例：书本地图与真实地图的比例值

小图光标移动的位置/小图的宽度=大图移动的位置/大图的宽度