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

jquery.parallaxmouse是一款非常实用的jQuery多层图片视觉差互动特效插件。该视觉差插件文件体积小，可以通过鼠标的上下左右移动来进行互动，非常适合用于制作网站的Banner。

使用方法

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

<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。

<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单位为像素。

#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;
}
              

初始化插件

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属性指定该元素的运动速率。