今天分享一个帮助你添加图片悬浮特效的jQuery插件 - Adipoli,这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相册,或者是网站个人作品集展示。你可以通过这种悬浮特效帮助用户集中浏览当前的图片,提高用户使用体验。希望大家喜欢!
主要特性
1.支持20多种不同的悬浮特效,包括初始特效和悬浮特效
2.支持主流浏览器,同时针对兼容HTML5的浏览器有特殊效果
3.支持多选项,用户可以自定义相关设定
如何使用
导入需要的类库和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