Image Warp插件实现图片点击扩大渐隐效果

点我下载jQuery Image Warp插件源代码[在线演示 ][源程序下载 ]

使用说明
需要使用jQuery 库文件和jQuery Image Warp 插件库文件

 

使用实例
一，包含文件部分

 

<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript" src="jquery.imageWarp.js">

 

二，HTML部分

 

<img src="ocean.gif" class="imagewarp" style="width:200px; height:150px" />

 

三，Javascript部分

 

<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp() ;
})
</script>

 

如上实例，就可以实现一个图片点击扩大渐隐效果，只需要指定图片对象，使用相对简单，jQuery Image Warp插件与设置其显示参数，如下：

 

warpfactor表示渐隐扩大的范围，默认为1.5倍
duration表示效果持续的时间，默认为1000，毫秒级

 

必优认为这个插件的特点在于效果实现的机制，这个是一个值得研究的，因为这种效果如果掌握可以应用于很多的点击事件中，而对于点击事件，任意一个非 独立的网页都存在，最常见的就是链接的点击，因些，把这种实现机制进行一些扩展，也许就能制作另一个非常实用的插件。

 

点我下载jQuery Image Warp插件源代码
http://jquerycodes.googlecode.com/files/jquery.imageWarp.rar