15种精美鼠标滑过图片标题动画特效jQuery插件

captionHover.js是一款轻量级的jQuery插件，用于实现鼠标滑过图片时图片标题动画特效。该jQuery插件可以实现12种不同的图片标题动画效果，它们都是使用HTML5 figure和figcaption属性来实现。

使用方法

使用该图片标题动画jQuery插件需要引入jquery，captionHover.dev.js和main.css文件。

<link href="path/to/main.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="path/to/captionHover.dev.js"></script>                
              

HTML结构

该图片标题动画特效最基本的HTML结构如下：

<figure class="demo">
  <img src="bg.jpg">
  <figcaption>
    <div>
      <h2>Caption title</h2>
      <p>More description</p>
    </div>
    <a href="#">View more</a>
  </figcaption>     
</figure>   
              

初始化插件

在页面DOM元素初始化完毕之后，可以通过下面的方法来初始化该jQuery插件。

$('.demo').captionHover({
  fx: 'lily',
});               
              

配置参数

$('.demo').captionHover({

  // lily, sadie, honey, layla, zoe, oscar
  // marley, ruby, roxy, sophie, romeo
  // dexter, sarah, chico, milo
  fx: 'honey',

  // heading color
  headColor: '#fff',

  // caption color
  captionColor: '#fff',

  // overlay color
  overlay: '#3085a3',

  // px | % | em
  figWidth: '49%',
  
  // px | % | em
  figHeight : '100%',

  // background color of caption
  bgCaption : '#000',

  // icon color
  iconColor : '#fff'

});  
              

• fx：图片标题动画特效的名称。可选值：lily, sadie, honey, layla, zoe, oscar, marley, ruby, roxy, sophie, romeo, dexter, sarah, chico, milo。
• headColor：头部的颜色。
• captionColor：标题的颜色。
• overlay遮罩层的颜色。
• figWidth：figure元素的宽度。
• figHeight：figure元素的高度。
• bgCaption：标题的背景颜色。。
• iconColor：图标的颜色。。

具体的例子请参考DEMO。