尝试动手制作javascript放大镜效果_javascript技巧
程序员文章站
2022-04-16 17:34:46
...
本文实例为大家介绍了基于javascript实现放大镜效果的原理和代码,分享给大家供大家参考,具体内容如下:
原理:
A:放大镜 B:小图片
C:大图片可视区域
D:大图片
鼠标的位置应该在放大镜的*,所以鼠标位置为:
clientX=A.offsetLeft()+B.offsetLeft+1/2*A.offsetWidth;
clientY=A.offsetTop()+B.offsetTop+1/2*A.offsetHeight;
鼠标移动过程中:放大镜A和大图D是一起随鼠标成比例运动的,因为当放大镜A的右边框移动到与小图B的右边框重合时,大图D也应该移动到了右边框与C的右边框重合的地方,所以,他们的移动比例是:(D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a
HTML部分:
放大镜效果
js部分:
以上就是本文的全部内容,希望对大家实现javascript放大镜效果有所帮助。
推荐阅读
-
ImageZoom 图片放大镜效果(多功能扩展篇)_javascript技巧
-
js实现网页自动刷新可制作节日倒计时效果_javascript技巧
-
ImageZoom 图片放大镜效果(多功能扩展篇)_javascript技巧
-
js实现网页自动刷新可制作节日倒计时效果_javascript技巧
-
使用纯javascript实现放大镜效果_javascript技巧
-
"好玩的放大镜效果" 的另一种实现方法_javascript技巧
-
鼠标移到图片上变大显示而不是放大镜效果_javascript技巧
-
基于insertBefore制作简单的循环插空效果_javascript技巧
-
javascript制作loading动画效果 loading效果_javascript技巧
-
使用纯javascript实现放大镜效果_javascript技巧