日期：2012/03/08?

在線演示? 本地下載

今天分享一個(gè)幫助你添加圖片懸浮特效的jQuery插件 - Adipoli，這個(gè)插件可以幫助你添加各種不同的懸浮特效到你指定的圖片上，特別適合制作你的相冊(cè)，或者是網(wǎng)站個(gè)人作品集展示。你可以通過(guò)這種懸浮特效幫助用戶集中瀏覽當(dāng)前的圖片，提高用戶使用體驗(yàn)。希望大家喜歡！

主要特性

• 支持20多種不同的懸浮特效，包括初始特效和懸浮特效
• 支持主流瀏覽器，同時(shí)針對(duì)兼容HTML5的瀏覽器有特殊效果
• 支持多選項(xiàng)，用戶可以自定義相關(guān)設(shè)定

如何使用

導(dǎo)入需要的類(lèi)庫(kù)和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>

或者你可以指定選項(xiàng)：

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

選項(xiàng)介紹

• startEffect :缺省圖片樣式
• hoverEffect : 懸浮后的圖片樣式
• imageOpacity : 初始圖片效果為透明或者覆蓋效果時(shí)的圖片透明度
• animSpeed : 特效的動(dòng)畫(huà)速度
• fillColor : 覆蓋顏色
• textColor : 文字顏色
• overlayText : 缺省顯示在覆蓋層上的HTML
• slices : 切片動(dòng)畫(huà)特效中的切片數(shù)量
• boxCols : 盒式特效中的盒子個(gè)數(shù)
• boxRows : 盒式特效中行數(shù)
• popOutMargin : 圖片彈出的margin
• popOutShadow : 圖片彈出效果的陰影長(zhǎng)度，只支持哪些支持text-shadow的瀏覽器

特效支持

初始特效:

• transparent
• normal
• overlay
• grayscale

懸浮特效

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

來(lái)源：分享一個(gè)分享超酷的添加圖片懸浮特效jQuery插件 - Adipoli

轉(zhuǎn)載于:https://www.cnblogs.com/gbin1/archive/2012/03/08/2385632.html

總結(jié)

以上是生活随笔為你收集整理的分享超酷的添加图片悬浮特效jQuery插件 - Adipoli的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。