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

 

展开阅读全文

没有更多推荐了,返回首页