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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!