-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
62 lines (62 loc) · 2.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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 class="scroll-number-1"></div>
<h2>循环样式</h2>
<div class="scroll-number-2"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gScrollNumber.js"></script>
<script type="text/javascript" src="gScrollNumber-3d.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
});
var scrollNumber1 = new gScrollNumber(".scroll-number-1", {
width: 30,
color: "orange",
fontSize: 40,
// autoSizeContainerWidth: true
});
var scrollNumber2 = new gScrollNumber3D(".scroll-number-2", {
width: 30,
color: "orange",
fontSize: 40,
autoSizeContainerWidth: false
});
var value0,value1;
value0 = 10000;
value1 = 10000;
scrollNumber0.run(value0++);
scrollNumber1.run(value1 += 2);
scrollNumber2.run(value0++)
setInterval(function () {
console.log(scrollNumber2.getCurrentValue())
scrollNumber0.run(value0++);
scrollNumber1.run(value1 += 2);
scrollNumber2.run(value0++)
}, 5000);
</script>
</body>
</html>