JavaScript 數字滾動庫：ScrollerJS

m45y 9年前發布 | 49K 次閱讀 JavaScript開發工具包 ScrollerJS

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.baiduhome.net/lib/view/home/1433145696072

 本文由用戶 m45y 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！