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

hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件

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

简介

#### 使用方法
使用该jQuery插件需要在页面中引入jquery和jquery.hover3d.min.js文件

```html
<script src="src/jquery.min.js"></script>
<script src="src/jquery.hover3d.min.js"></script>   
```               
####  HTML结构
该鼠标滑过图片效果的HTML结构如下：包裹元素和它里面的子元素将被之后为3D卡片效果。

```html
<div class="project">
    <div class="project__card">
        
    </div>
</div>      
```        
####  CSS样式
该特效不需要特别的CSS样式，你可以指定自己的CSS样式。但是你可以为鼠标滑入和滑出图片时添加下面的辅助class类。

```html
/* This class can be replaced using options */
.hover-in{
    transition: .3s ease-out;
}
.hover-out{
    transition: .3s ease-in;
}                  
```
####  初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该插件。

```html
$(".project").hover3d({
    selector: ".project__card"
});    
```           
####  配置参数
|  参数 | 类型  |默认值 |描述 |
| ------------ | ------------ |
|selector|string|null|3D卡片的选择器元素|
|perspective|integer|1000|3D透视的深度|
|sensitivity|integer|20|鼠标移动的灵敏度，数值越大越不灵敏|
|invert|boolean|false|默认行为是元素会跟随鼠标，就像元素一直面向鼠标|
|hoverInClass|string|hover-in|鼠标滑入时的辅助class类，会在300毫秒后移除|
|hoverOutClass|string|hover-out|鼠标滑出时的辅助class类，会在300毫秒后移除|
|hoverClass|string|hover-3d|鼠标滑过图片时的辅助类|

web299.com

hover3d.js-超酷鼠标滑过图片3D卡片效果jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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