JavaScript 数字滚动库:ScrollerJS

m45y 9年前

ScrollerJS 是 JavaScript 轻量级数字滚动库,提供动态数字滚动效果,可以嵌入到 Web 应用中使用。

主要特性

  • 轻量级,压缩后只有 12 KB

  • 没有任何依赖和外部框架和库

  • 跨浏览器兼容:Chrome 42.0, Firefox 37.0.2, IE 11, Safari 5.1.7, Opera 29.0

ScrollerJS 支持 CSS 转换和 DOM 动态。

示例

HTML:

<div id="clock-pane"></div>

JavaScript:

var clockScroller=Scroller.getNewInstance({   width:200,   amount:40,   interval:600,   separatorType:Scroller.SEPARATOR.TIME,   separator:":"  });  clockScroller.appendTo(document.getElementById("clock-pane"));  clockScroller.start("000000");  setInterval(function(){   var now=new Date();   var hours=now.getHours();   var minutes=now.getMinutes();   var seconds=now.getSeconds();   hours=(hours<10)?"0"+hours:hours+"";   minutes=(minutes<10)?"0"+minutes:minutes+"";   seconds=(seconds<10)?"0"+seconds:seconds+"";   var timeStr=hours+minutes+seconds;   clockScroller.scrollTo(hours+minutes+seconds);  },1000);

项目主页:http://www.open-open.com/lib/view/home/1433145696072