文章目录
使用方法一、gScrollNumber.js是什么？二、使用步骤1.引入库2.效果截图使用方法
用于数字屏更新滚动效果。一、gScrollNumber.js是什么？
用来使数字能发生滚动的js。
/*** Created by GYFlasher on -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;};
二、使用步骤
1.引入库
代码如下（示例）：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>数字滚动效果</title><script src="/jquery-3.1.1.min.js"></script><script type="text/javascript" src="gScrollNumber.js"></script></head><style type="text/css">.number {height:100px;width: auto;border: 10px solid #131212;}.g-num-item{border-right: 5px solid red;}</style><body><div class="number"></div><script type="text/javascript">var total = 1000;setInterval(function(){var scrollNumber0 = new gScrollNumber(".number", {width: 50, // 每个数字元素的宽color: "#1b1a1a", // 数字元素的字体颜色fontSize: 80, // 数字元素的字体大小autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为falsebackground: "",});total = total + parseInt(Math.random()*10);scrollNumber0.run(total);},1000)</script></body></html>
复制代码可直接查看效果。
