Adipoli 實際執行畫面

Adipoli 一個簡單的 jQuery 套件，讓網站的圖片更有時尚新穎的效果，設計上有用到 HTML5 的技術所以舊式的瀏覽器並不支援。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//Adipoli 的主程式碼
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

接下來HTML部分只要給需要的範圍一個可辨識的ID或 Class 名稱
<div class="effect-container">
  <div class="effect-details">標題一整列圖片</div>
  <img class="img-style row" src="img/gallery-images/6_1.png"/>
  <img class="img-style row" src="img/gallery-images/6_2.png"/>
  <img class="img-style row" src="img/gallery-images/6_3.png"/>
</div>

最後加上啟動的 JavaScript 程式碼就完成了
$(function(){
  $('.row').adipoli({
    'startEffect' : 'grayscale',
    'hoverEffect' : 'normal'
  });
});

附上可修改的參數值

參數	說明
startEffect	一開始的圖片樣式 參數 說明 transparent 透明 normal 正常 overlay 覆蓋 grayscale 灰階
hoverEffect	滑鼠移過的動畫樣式 參數 說明 normal 正常 popout 彈出式 sliceDown 一片一片向下展開 sliceDownLeft 一片一片向下往左展開 sliceUp 一片一片向上展開 sliceUpLeft 一片一片向下網左展開 sliceUpRandom 一片一片隨機方向展開 sliceUpDown 一片一片上下一起展開 sliceUpDownLeft 一片一片上下一起往左展開 fold 一條一條展開 foldLeft 一條一條往左展開 boxRandom 方塊隨機方向展開 boxRain 方塊左上往右下展開 boxRainReverse 方塊右下往左上展開 boxRainGrow 方塊左上往右下展開 boxRainGrowReverse 方塊右下往左上展開
imageOpacity	如設定為半透明的透明度數值
animSpeed	動畫的速度
fillColor	覆蓋的文字
textColor	文字的顏色
overlayText	是否顯示文字
slices	動畫的過場格數
boxCols	在一排的動畫數量
boxRows	在一行的動畫數量
popOutMargin	彈出式視窗
popOutShadow	彈出式視窗陰影

作者網站：http://jobyj.in/adipoli/
檔案大小：5.52 KB
檔案下載：http://jobyj.in/adipoli/adipoli-v2.zip
檔案備份：下載