简 介

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

演 示

下面的演示只是众多效果中的一小部分，通过设置 startEffect 和 hoverEffect 参数，组合你喜欢的效果。
startEffect : grayscale, hoverEffect : normal (仅支持 HTML5 的浏览器有效)
startEffect : normal, hoverEffect : popout
startEffect : overlay, hoverEffect : sliceDown
startEffect : transparent, hoverEffect : boxRandom
startEffect : overlay, hoverEffect : foldLeft
startEffect : transparent, hoverEffect : boxRainGrowReverse

使 用

加载样式表、jQuery 和 Adpoli 的插件脚本。
<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>
      $('.yourclass').adipoli();
</script>
HTML代码：
<div>
      <a href="#"><img class="yourclass" src="yourimagepath/demo1.jpg" /></a>
      <a href="#"><img class="yourclass" src="yourimagepath/demo2.jpg" /></a>
      <a href="#"><img class="yourclass" src="yourimagepath/demo3.jpg" /></a>
</div>
设置选项：
$('.yourclass').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});
可用的设置选项：
  • startEffect : 初始图片效果
  • hoverEffect : 鼠标悬停时图片的效果
  • imageOpacity : 当 startEffect 设置为 transparent 或者 overlay 时，图片的透明度。
  • animSpeed : 鼠标悬停时动画效果显示速度，默认值300，单位毫秒。
  • fillColor : 遮罩颜色。
  • textColor : 文字颜色。
  • overlayText : 遮罩上的文字。
  • slices : 切片动画效果时，切片的数量。
  • boxCols : 盒子动画效果时，一行内盒子的数量。
  • boxRows : 盒子动画效果时，盒子的行数。
  • popOutMargin : 弹出图片的边距。
  • popOutShadow : 弹出图片的阴影大小。需要浏览器支持CSS的 text-shadow 属性，否则不显示。
初始效果：
  • transparent
  • normal
  • overlay
  • grayscale
悬停效果：
  • normal
  • popout
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpRandom
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • foldLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

浏览器支持：