分享超酷的添加圖片懸浮特效jQuery插件 - Adipoli
日期: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
歡迎訪問GBin1.com


浙公網安備 33010602011771號