当前位置：首页 > 网页特效 > 鼠标效果

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

分类：鼠标效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<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结构如下：

```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插件。

```html
$('.demo').captionHover({
  fx: 'lily',
});              
``` 
#####  配置参数
```html
$('.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|图标的颜色。|

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果