1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 分享超酷的添加图片悬浮特效jQuery插件 - Adipoli

分享超酷的添加图片悬浮特效jQuery插件 - Adipoli

时间:2018-10-08 20:25:43

相关推荐

分享超酷的添加图片悬浮特效jQuery插件 - Adipoli

日期:/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 : 缺省显示在覆盖层上的HTMLslices : 切片动画特效中的切片数量boxCols : 盒式特效中的盒子个数boxRows : 盒式特效中行数popOutMargin : 图片弹出的marginpopOutShadow : 图片弹出效果的阴影长度,只支持哪些支持text-shadow的浏览器

特效支持

初始特效:

transparentnormaloverlaygrayscale

悬浮特效

normalpopoutsliceDownsliceDownLeftsliceUpsliceUpLeftsliceUpRandomsliceUpDownsliceUpDownLeftfoldfoldLeftboxRandomboxRainboxRainReverseboxRainGrowboxRainGrowReverse

来源:分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。