放大镜效果的JS

Javascript是目前比较广泛应用于网页的技术，很多炫目的效果都是由它来实现的。今天在digg上看到了这个名为Loupe.js的放大镜效果的js，可以在图片显示上实现放大效果。

这个js十分小巧，只有7kB，实际效果还是很不错的，而对于网页设计者来说实现起来也并不复杂。

应用方法:

1. 首先下载loupe.js 1.0。解压后上传其中的loupe.js和loupe.png到网站的目录中。

2. 在要实现这一功能的页面的header中载入loupe.js和loupe.png:

3. 具体使用也不复杂，只需将在img的tag放入div里，并加入onload=”initLoupe(this.id);” 就可以了。

这里的width和height要设得比原始图片小才能显出放大的效果。

4.更多:可以通过设置相应值来控制初始状态是否显示放大镜，当然如果具备图形编辑能力的话还可以自行设计放大镜的样子。

缺点:
1.由于IE并不支持canvas这个标签，所以loupe.js并不支持IE，只在Mozilla Firefox 1.5+, Opera 9+和Safari中才有表现。
2.同一页面中应用多个该效果时会出错。

总结:还不是很成熟，喜欢的可以玩一玩。Loupe.js官方主页。

点击查看更多关于javascript，loupe，webdesign的内容。