阅读(7) (0)

可制作炫酷页面滚动效果的jQuery事件插件

2016-08-23 10:17:29 更新

ie兼容9
插件描述:jquery.scrollex.js是一款可制作炫酷页面滚动效果的jQuery事件插件。该插件中包含有一组预置的jQuery事件,通过这些事件,可以在页面滚动时为指定元素制作相应的动画效果。

要使用这个jQuery插件,需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollex.js"></script>

调用插件

在页面DOM元素加载完毕之后,你可以通过scrollex()方法来初始化插件。例如,在指定元素上制作进入视口和离开视口的效果:

$(function() {
  $('#foobar').scrollex({
    enter: function() {
      // Set #foobar's background color to green when we scroll into it.
        $(this).css('background-color''green');
    },
    leave: function() {
      // Reset #foobar's background color when we scroll out of it.
        $(this).css('background-color''');
    }
  });
});

事件

jquery.scrollex.js插件支持以下一些事件。

enter:当指定元素进入视口时触发。可以通过mode, top和bottom参数来调整它的行为。

leave:当指定元素离开视口时触发。可以通过mode, top和bottom参数来调整它的行为。

initialize:当scrollex()方法在某个元素上调用时触发。

terminate:当unscrollex()方法在某个元素上调用时触发,它的作用是撤销前一个scrollex()调用。

scroll:在某个元素滚动通过视口时触发。例如:

$(function() {
  $('#foobar').scrollex({
    scroll: function(progress) {
 
      // Progressively increase #foobar's opacity as we scroll through it.
        $(this).css('opacity', Math.max(0, Math.min(1, progress)));
 
    }
  });
});

mode, top和bottom

元素在视口中的位置可以通过mode, top和bottom参数来做进一步的调整。

mode

用于决定元素和视口的接触面积,判断一个元素是否在视口之内。可以是下面的一些取值:

取值行为

default元素和视口的接触面积在视口之内。

top顶部视口边缘在元素之内。

bottom底部视口边缘在元素之内。

middle顶部或底部视口边缘在元素的中间。

top和bottom

通过top和bottom参数可以移动元素和视口的接触面积,可以使用像素值,百分比值,或视口的百分比值(如20vh)。正值向视口内部移动,负值向视口外部移动。例如:

$(function() {
  $('#foobar').scrollex({
    top: '-20%',
    bottom: '-20%',
    enter: function() {
      $(this).css('background-color''green');
 
    },
    leave: function() {
      $(this).css('background-color''');
    }
  });
});