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

放大镜实现步骤

1.获取元素

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

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

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

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


效果

代码如下


html


css


css


js
js
js

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容