jQuery.adipoli 图片鼠标悬停特效 20多种效果

Adipoli jQuery Image Hover Plugin

简 介

Adipoli 是一个简单的 jQuery plugin,可以给图片定义鼠标悬停时的效果。 

这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相册,或者是网站个人作品集展示。你可以通过这种悬浮特效帮助用户集中浏览当前的图片,提高用户使用体验

主要特性

  • 支持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



赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏