效果：初始化加載+定時刷新增加數值
相關代碼：
容器：
<h2>不循環樣式</h2> <!-- 任意一個非行內元素就可以當做容器，綁定id 或 class ,必須設置容器的高度 height,因為每個數字的高度是由容器的高度決定所以容器的高度必須要設置的 --> <div class="scroll-number-0"></div>
引入js文件：
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="gScrollNumber.js"></script>
初始化對象運行：
var scrollNumber0 = new gScrollNumber(".scroll-number-0", { width: 30, // 每個數字元素的寬 color: "orange", // 數字元素的字體顏色 fontSize: 40, // 數字元素的字體大小 autoSizeContainerWidth: true, // 自動計算容器寬度 .scroll-number-0 ，如果已經使用css 制定了容器的寬度，此處可設置為false background: "#333", }); var value=1023571; scrollNumber0.run(value0+=4302);
下面是完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=414,user-scalable=0"> <title>里程表數字滾動效果 Demo</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; } .container { margin: 100px auto; } .container div { margin-left: 10px; display: block; height: 60px; border: 1px solid goldenrod; margin-top: 10px; margin-right: 10px; } </style> </head> <body> <div class="container"> <h2>不循環樣式</h2> <div class="scroll-number-0"></div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="gScrollNumber.js"></script> <script> /** * 初始化一個數字滾動對象 * 構造函數的參數項可查看 gScrollNumber.js 里面的注釋 */ var scrollNumber0 = new gScrollNumber(".scroll-number-0", { width: 30, // 每個數字元素的寬 color: "orange", // 數字元素的字體顏色 fontSize: 40, // 數字元素的字體大小 autoSizeContainerWidth: true, // 自動計算容器寬度 .scroll-number-0 ，如果已經使用css 制定了容器的寬度，此處可設置為false background: "#333", }); var value0; value0 = 1023571; scrollNumber0.run(value0+=4302); setInterval(function() { scrollNumber0.run(value0+=4302); }, 3000); </script> </body> </html>
gScrollNumber.js代碼
基本原理：每個數字都包含0-9的樣式，通過在一定時間內滾動到指定的位置（top:-**px）實現數字滾動的效果。
transition：CSS3過渡
/** * Created by GYFlasher on 2017-12-08. */ /** * 滾動數字 (依賴jq) * @param el 用來顯示滾動字幕的容器class 或 id * @param option 配置參數 width: 數字的寬 (無單位),fontSize: 字體大小（無單位）, color: 文字顏色,autoSizeContainerWidth: 自動計算容器寬度 * @returns {Object} */ function gScrollNumber(el,option) { this.container = $(el); this.option = option; this.container.css({ position: "relative", padding: "0", overflow: "hidden" }); var height = this.container.height(); this.subWidth = option.width; this.subHeight = height; this.autoSizeContainerWidth = option.autoSizeContainerWidth; this.background=option.background; this.col = '<span class="g-num-item" style="top: 0;">' + '<i>0</i>' + '<i>1</i>' + '<i>2</i>' + '<i>3</i>' + '<i>4</i>' + '<i>5</i>' + '<i>6</i>' + '<i>7</i>' + '<i>8</i>' + '<i>9</i>' + '<i>.</i>' + '</span>'; } gScrollNumber.prototype.run = function (value) { // console.log("old = " + this.currentValue + "\nnew = " + value); this.currentValue = value; var self = this; var valueString = value.toString(); if (self.autoSizeContainerWidth) { self.container.css({ "width": valueString.length * self.subWidth + "px" }); } var oldLength = self.container.children(".g-num-item").length; if (valueString.length > oldLength) { for (var i = 0; i < valueString.length - oldLength; i++) { self.container.append(self.col); self.container.children(".g-num-item").eq(oldLength + i).css({ right: self.subWidth * (oldLength + i) + "px" }); } }else if (valueString.length < oldLength) { for (var i = 0; i < oldLength - valueString.length; i++) { self.container.children(".g-num-item:last").remove(); } } $(".g-num-item").css({ position: "absolute", width: self.subWidth + "px", height: 11 * self.subHeight + "px" }); $(".g-num-item i").css({ width: self.subWidth + "px", height: self.subHeight + "px", lineHeight: self.subHeight + "px", textAlign: "center", fontSize: self.option.fontSize + "px", color: self.option.color, display: "block", fontStyle: "normal", background:self.background,//梁濤新增background屬性 }); setTimeout(function () { if (valueString.length !== self.container.children(".g-num-item").length) { console.log("%c%s","color:red;", "數字位數和數字條個數不相等"); debugger } for (var i = 0; i < valueString.length; i++) { var y = 0; if (valueString[i] != ".") { y = - (parseInt(valueString[i]) * self.subHeight); }else { y = - (10 * self.subHeight); } // console.log(self.container.attr("class") + " / " + self.container.attr("id") + " : " +valueString); self.container.children(".g-num-item").eq(valueString.length - i - 1).css({ top: y + "px", transition: "top 1.0s" }) } }, 0); }; gScrollNumber.prototype.getCurrentValue = function () { return this.currentValue; };