jQuery.AutoBackgroundScroll.js是一款可以生成自动滚动背景图像的轻量级jQuery插件。该插件可以使背景图片连续无缝的滚动,你可以控制背景图片滚动的方向,滚动速度等参数。

使用方法

使用该背景图片滚动插件需要引入jQuery和autoBackgroundScroll.js文件。

<script src="jquery-1.11.3.min.js"></script>
<script src="js/autoBackgroundScroll.js"></script>              
              
CSS样式

你需要为你的页面添加一个背景图片。

body {
  background-image: url(bg.jpg);
  background-position: 0px 0px;
}              
              
初始化插件

在页面DOM元素加载完成之后,可以通过下面的方法来初始化该插件。

$('body').autoBackgroundScroll(OPTIONS);    
              

配置参数

下面是该背景图片滚动插件的一些可用配置参数。

  • duration:动画的持续时间,默认值为1秒。
  • speed:动画的速度,默认值为0.5秒。
  • direction1:背景图片滚动的方向。可选值有:'right', 'left', 'top', 'bottom'。默认值为:'right'。
  • direction2:如果想制作斜线方向的滚动可指定该参数。可选值有:'right', 'left', 'top', 'bottom'。如果该参数与direction1参数值相同,该参数无效。
  • imageWidth:背景图片的水平宽度。
  • imageHeight:背景图片的垂直高度。