日期：2012/03/08 

在線演示  本地下載

今天分享一個幫助你添加圖片懸浮特效的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