分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli

日期：2012/03/08  来源：GBin1.com

在线演示   本地下载

今天分享一个帮助你添加图片悬浮特效的jQuery插件 - Adipoli ，这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上，特别适合制作你的相册，或者是网站个人作品集展示。你可以通过这种悬浮特效帮助用户集中浏览当前的图片，提高用户使用体验。希望大家喜欢！

主要特性

• 支持20多种不同的悬浮特效，包括初始特效和悬浮特效
• 支持主流浏览器，同时针对兼容HTML5的浏览器有特殊效果
• 支持多选项，用户可以自定义相关设定

如何使用

导入需要的类库和CSS：

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>  

指定需要悬浮特效的图片：

<script>
      $('#gbin1-image').adipoli();
</script> 

或者你可以指定选项：

$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});  

选项介绍

• startEffect :缺省图片样式
• hoverEffect : 悬浮后的图片样式
• imageOpacity : 初始图片效果为透明或者覆盖效果时的图片透明度
• animSpeed : 特效的动画速度
• fillColor : 覆盖颜色
• textColor : 文字颜色
• overlayText : 缺省显示在覆盖层上的HTML
• slices : 切片动画特效中的切片数量
• boxCols : 盒式特效中的盒子个数
• boxRows : 盒式特效中行数
• popOutMargin : 图片弹出的margin
• popOutShadow : 图片弹出效果的阴影长度，只支持哪些支持text-shadow的浏览器

特效支持

初始特效:

• transparent
• normal
• overlay
• grayscale

悬浮特效

• normal
• popout
• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpRandom
• sliceUpDown
• sliceUpDownLeft
• fold
• foldLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

来源：分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli