当前位置：首页 > 网页特效 > 图片特效

实用的jQuery多层图片视觉差互动特效插件

分类：图片特效日期：2024-05-14 点击(1) 评论(0)

简介

##### 使用方法
使用该视觉差特效插件需要引入jQuery和jquery.parallaxmouse.min.js文件。

```html
<script src="js/jquery.min.js"></script>
<script src="dist/jquery.parallaxmouse.min.js"></script> 
```               
#####  HTML结构
该视觉差插件使用class来决定每个元素的原点方向。如果想要一个元素从左边开始定位，可以为它添加left class。如果是从上边，使用top class。如果是从右边，则不要添加left class，如果是从下巴，则不要添加top class。

```html
<div id="galaxy">
    <img id="star1" src="images/star1.png" class="top left">
    <img id="star2" src="images/star2.png" class="top">
    <img id="star3" src="images/star3.png" class="">
</div>   
```
#####  CSS样式
在CSS中设置元素的初始位置的时候，position属性必须设置为absolute。另外该插件所需要的CSS单位为像素。

```html
#galaxy {
    width: 100%;
    height: 400px;
    max-height: 400px;
    position: relative;
    background: #2f2f6d;
    overflow: hidden;
}
#star1 {
    position: absolute;
    top: 150px;
    left: 200px;
}
#star2 {
    position: absolute;
    top: 150px;
    right: 200px;
}
#star3 {
    position: absolute;
    bottom: 150px;
    right: 200px;
}
```
#####  初始化插件
```html
jQuery(window).parallaxmouse({
    invert: true,
    range: 400,
    elms: [
        {el: $('#star1'), rate: 0.2},
        {el: $('#star2'), rate: 0.4},
        {el: $('#star3'), rate: 0.1},
    ]
});      
```          
jQuery选择器选择的元素是视觉差元素在鼠标互动是相对的元素。

插件的参数配置非常简单：

- invert：指定元素的运动方向是否相对于鼠标移动的方向。
- range：指定一个元素在某个方向上可以运动的最大距离。
- elms：一个数组对象，用于指定哪些元素要进行视觉差互动。每一个元素对象都包含一个指向视觉差元素的引用，rate属性指定该元素的运动速率。

web299.com

实用的jQuery多层图片视觉差互动特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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