ScrollerJSJavaScript 数字滚动库

联合创作 · 2023-09-22 06:46

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);
浏览 95
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报