用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

翻页板小脚本

2022-01-28 作者: baipiaozhe举报

[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>

[代码运行效果截图]


翻页板小脚本

[源代码打包下载]




网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...