[html]代码库
<!DOCTYPE html>
<--源码仅供学习交流,请勿用于商业用途-->
<--制作:baipiaozhe-->
<--发布网站:www.yuncode.net-->
<head>
<meta charset="UTF-8">
<title>numboard</title>
<link rel="stylesheet" href="lib/style/scrollboard.css">
<script src="lib/scripts/jquery-1.10.2.js"></script>
<script src="lib/scripts/scrollboard.js"></script>
<script src="lib/scripts/countboard.js"></script>
</head>
<body>
<div class="container">
	<div style="padding-top: 5em;">
		<div style="color: white;text-align: center;">含小数</div>
		<div class="number-box numberRun1"></div>
	</div>
	
	<div style="padding-top: 5em;">
		<div style="color: white;text-align: center;">不含小数</div>
		<div class="number-box numberRun2"></div>
	</div>
	<div style="padding-top: 5em;">
		<div style="color: white;text-align: center;">另外一种滚动效果</div>
		<div class="number-box" id="countRun"></div>
	</div>
</div>
<script>
	
	$(function(){
		//翻页效果
		setNumberRun1();
		let stationTimer = setInterval(() => {
			setNumberRun1();
		}, 3000 * 10);
		
		//翻页效果
		var numRun = $(".numberRun2").numberAnimate({
			num: 4532,
			dot: 0,
			speed: 2000,
		});
		
		$("#countRun").rollNum({
			deVal:"3251.05"
		});
	})
	
	function setNumberRun1(){
		 var numRun = $(".numberRun1").numberAnimate({
			num: 1236,
			dot: 2,
			speed: 2000,
		});
	}
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]
中级程序员
by: 我爱写代码 发表于:2022-06-18 15:36:58 顶(0) | 踩(0) 回复
积分
回复评论