使用方法
用于数字屏更新滚动效果。
一、gScrollNumber.js是什么？
用来使数字能发生滚动的js。
/**
* 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;
};
二、使用步骤
1.引入库
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字滚动效果</title>
<script src="https://code.jquery.com/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 制定了容器的宽度，此处可设置为false
background: "",
});
total = total + parseInt(Math.random()*10);
scrollNumber0.run(total);
},1000)
</script>
</body>
</html>
复制代码可直接查看效果。
2.效果截图
版权声明：本文为weixin_41607376原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。