放大镜实现步骤
1.获取元素
2.实现鼠标移上时显示小方块 和大图
3.再添加中图的移动事件 获取鼠标的坐标付给小方块 注意必须坐标还要减去小方块的宽高的一半 让光标在中间显示
4.实现大图同比例的显示 原理:光标移动的坐标/大图移动的坐标=中图的宽度/大图的宽度 求的是大图移动的光标 带进数值即可
5.实现图片切换 试着用闭包形式实现
效果
代码如下
html
css
css
js
js
js
总结：考察event事件对象，clientX和clientY的运用 以及比例：书本地图与真实地图的比例值
小图光标移动的位置/小图的宽度=大图移动的位置/大图的宽度
