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

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

使用方法

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

HTML结构

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

Caption title

More description

View more

初始化插件

在页面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。