Google
 
欢迎使用千一产品
千一产品:ScrollBinder v1.0.3

也许,您要说:无缝滚动多简单呀,就那十几行代码。然而 ScrollBinder 不是十几行代码那么简单,无缝滚动只是它功能的冰山一角,除了无缝滚动,它还支持屏停滚动、变速滚动、状态、外部程序控制……

版本更新
  • 修正 滚动方向被反向后,在边界无滚动效果的错误。
演示地址

/products/webComponents/ScrollBinder/demo.htm

 
运行环境
  • Internet Explorer 全面支持
  • Firefox 全面支持
程序参考
程序开始

var continuousUp = new ScrollBinder(document.getElementById("continuousUp"), "up", 1, 50, 0);

continuousUp.setAutoPause();

continuousUp.start();

相关函数

ScrollBinder(target, direction, step, delay, screenDelay[, initialize])

构造函数。

  • target 对象 要进行滚动的控件对象,比如:document.getElementById("continuousUp")。
  • direction 字符串 滚动方向,可选值:up、down、left、right。
  • step 数字 步进长度,该值越大表示滚动速度越快。
  • delay 数字 延时,该值越大表示滚动速度越慢。
  • screenDelay 数字 屏停延时,即在到达一屏时停留的时间,屏停滚动时有效。
  • initialize 布尔 是否初始化内容和位置,如果内容已经准备好,则建议该参数为 true。默认为 true。

setAutoPause()

设置鼠标移上后自动停止,鼠标移出后自动继续的功能。

start([scrollType[, targetScreenIndex[, stopAtTargetScreen[, startImmediately]]]])

开始滚动。

  • scrollType 字符串 滚动类型,可选值:continuous(连续滚动)、screen(具有屏停效果的滚动)。默认值为 continuous。
  • targetScreenIndex 数字 表示滚动到哪个屏,scrollType 为 screen 时有效。如果为 null,则表示滚动到下一个屏。默认值为 null。
  • stopAtTargetScreen 数字 到达指定屏时是否停止,scrollType 为 screen 时有效。默认值为 false,表示不停止,而是使用屏停延时。
  • startImmediately 布尔 是否立即开始:如果为 false 且屏停延时 > 0 且滚动类型为 screen,则在屏停延时后开始;如果为 false 且(屏停时间 <= 0 或 滚动类型不是 screen),则在延时后开始;如果为 true,则立即开始。默认值为 false。

pause()

暂停滚动。

resume()

恢复滚动。

stop()

停止滚动。

initializeContent()

初始化内容。滚动需要复制原始内容及一些样式设置。如果构造函数的 initialize 为 true,则自动调用该方法。

initializePosition()

初始化位置。设置初始位置为开始滚动的位置。如果构造函数的 initialize 为 true,则自动调用该方法。

相关属性
  • onMoving 函数 滚动中,即将进行移动时的事件处理程序。传入参数 distance 表示当前位置距目的地的距离,如果 scrollType 为 continuous,则 distance 为 Number.MAX_VALUE。必须返回一个新的步进值,如果不需要对步进值进行改变,则返回 this.step。该函数可以用来改变步进值,比如当 distance 越大时,步进值越大,滚动越快。
常见问题
  • 为什么无法向下或向下滚动? 请检查 direction 参数,是不是 up 或 down,注意不要设置成了 top 和 bottom。
  • 为什么无法向左或向右滚动? 向左或向右需要内容在一行,请参照示例文件用样式表将这些内容设置在一行,或者您可以使用 table 布局,这样可以很方便地将内容设置在一行。
产品下载

当前版本 v1.0.3 点击下载压缩文件包,内含:

  • JS 主程序文件 1 个
  • 示例文件 1 个