lem_counter实现数字滚动动画效果代码-html代码-BFW代码库

lem_counter实现数字滚动动画效果代码

代码语言：html

所属分类：动画

代码描述：lem_counter实现数字滚动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery结合GASP数字动画插件</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<style>
    body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenLite.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lem_counter.js"></script>

<style type="text/css">
body{background:#fff;color: #333;}
.box{
	font-size: 40px;
}
.btn-container{
	line-height: 50px;
}
</style>

</head>
<body>

<div class="container">
	<div class="row" style="padding:2em 0;">
			<h1>示例</h1>
			<h3>Animate to</h3>
			<pre>
$('.counter-demo-1').lemCounter({
value_to: 100
});						
			</pre>
			<div class="col-md-2">
				<div class="counter-demo-1 box">100</div>
			</div>
			<div class="col-md-10 btn-container">
				<button class="btn btn-info" id="btn1">点击开始执行</button>
			</div>
			
			<script type="text/javascript">
				$("#btn1").click(function(){
					$('.counter-demo-1').lemCounter({
					  value_to: 100
					});	
				})
			</script>
	</div>

	<hr>
	<div class="row">
		<h3>Animate from to</h3>
	<pre>
$('.counter-demo-2').lemCounter({
value_to: 100,
value_from: 200
});						
	</pre>
	<div class="col-md-2">
		<div class="counter-demo-2 box">100</div>
	</div>
	<div class="col-md-10 btn-container">
		<button class="btn btn-info" id="btn2">点击开始执行</button>
	</div>
	
	<script type="text/javascript">
		$("#btn2").click(function(){
			$('.counter-demo-2�.........完整代码请登录后点击上方下载按钮下载查看