[Java教程]使用jQuery制作的一个放大镜特效
0 2016-03-19 10:00:07
先看效果:
方图(w=h)
竖图(h>w)
横图(w>h)
使用说明:
css:顶部引入放大镜样式文件magnifier.css,或将magnifier.css中的内容粘贴到自己的样式文件中亦可,样式中的属性值可酌情修改,但一些必须的属性例如position,display等最好不要删改。
js:底部引入magnifier.js,由于是基于jquery的,所以务必确保之前已经引入了jquery文件,或者将magnifier.js中的内容粘贴到自己的脚本文件中亦可,为了使html的使用尽可能简单所以封装了很多东西,导致文件有点臃肿,我会有时间再改进一下:)
html:由于js已经封装好了,所以html的使用结构非常简单,如下即可:
![yourImage.jpg](yourImage.jpg)
制作思路:
使用的是背景图定位,小图和大图用的是同一张图,根据小图中放大镜(即鼠标)的所在位置映射为影布的背景图位置。
点击下载:
打包下载 magnifier.js magnifier.css index.html
本文网址:http://www.shaoqun.com/a/202923.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
jquery
0