锐客网

  1. 首页 > it技术 > >

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

放大镜实现步骤
1.获取元素
2.实现鼠标移上时显示小方块和大图
3.再添加中图的移动事件获取鼠标的坐标付给小方块注意必须坐标还要减去小方块的宽高的一半让光标在中间显示
【前端小白之实现放大镜效果】4.实现大图同比例的显示 原理:光标移动的坐标/大图移动的坐标=中图的宽度/大图的宽度求的是大图移动的光标带进数值即可
5.实现图片切换试着用闭包形式实现


效果 代码如下


前端小白之实现放大镜效果
文章图片
html

前端小白之实现放大镜效果
文章图片
css

前端小白之实现放大镜效果
文章图片
css

前端小白之实现放大镜效果
文章图片
js 前端小白之实现放大镜效果
文章图片
js 前端小白之实现放大镜效果
文章图片
js 总结：考察event事件对象，clientX和clientY的运用以及比例：书本地图与真实地图的比例值
小图光标移动的位置/小图的宽度=大图移动的位置/大图的宽度

    推荐阅读


    上一篇：Docker|Docker 三篇 之二

    下一篇：他其实没那么喜欢你影评