放大镜效果的JS

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

loupe

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

应用方法:

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

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

    // 如果loupe.png所在的目录和网页存放在不同目录,那么就要加上下面这一行
    <scriptscript type="text/javascript">var loupePath="loupe.png所在目录/";</script>
    // 否则的话就只需下面一行,当然,src也要指向正确的位置
    <script type="text/javascript" src="loupe.js"></script>
    
  3. 具体使用也不复杂,只需将在img的tag放入div里,并加入onload="initLoupe(this.id);"就可以了。

    <div>
    <img id="..." onLoad="initLoupe(this.id);" src="图片地址" width="356" height="205" alt="..."> 
    </div>
    

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

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

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

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

Lucifr

Read more posts by this author.

Beijing, China http://lucifr.com