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

当前位置:主页 > jQuery库 > 视觉差滚动效果 > 实用的jQuery多层图片视觉差互动特效插件
实用的jQuery多层图片视觉差互动特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:09-29
    阅读:
简要教程

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