怎样用java做出特效_[Java教程]使用jQuery制作的一个放大镜特效

[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的使用结构非常简单，如下即可：

制作思路：

使用的是背景图定位，小图和大图用的是同一张图，根据小图中放大镜(即鼠标)的所在位置映射为影布的背景图位置。

点击下载:

打包下载　　magnifier.js　　magnifier.css　　index.html

本文网址：http://www.shaoqun.com/a/202923.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0