利用jQuery实现数字滚动点击开始代码



7 26 9



特效描述:利用jQuery实现 数字滚动 点击开始代码,利用jQuery实现数字滚动点击开始代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/lem_counter.js"></script>

3. HTML代码

<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').lemCounter({
			  value_to: 100,
					value_from: 200
			});	
		})
	</script>
	</div>
	<hr>
	<div class="row">
		<h3>Value to from content</h3>
		<pre>
$('.counter-demo-3').lemCounter({
value_to_from_content: true
});					
		</pre>
		<div class="col-md-2">
			<div class="counter-demo-3 box">100</div>
		</div>
		<div class="col-md-10 btn-container">
			<button class="btn btn-info" id="btn3">点击开始执行</button>
		</div>
		<script type="text/javascript">
			$("#btn3").click(function(){
				$('.counter-demo-3').lemCounter({
					value_to_from_content: true
				});	
			})
		</script>
	</div>
	<hr>
	<div class="row">
		<h3>Settings from data attribute</h3>
		<pre>
$('.counter-demo-4').lemCounter();
&lt;div
class="counter-demo-4"
data-lem-counter='{"value_from": 100000, "value_to": 1000, "animate_duration": 3, "locale": "en-US"}'&gt;1,000
&lt;/div&gt;				
		</pre>
		<div class="col-md-2">
			<div
class="counter-demo-4 box"
data-lem-counter='{"value_from": 100000, "value_to": 1000, "animate_duration": 3, "locale": "en-US"}'>1,000
</div>
		</div>
		<div class="col-md-10 btn-container">
			<button class="btn btn-info" id="btn4">点击开始执行</button>
		</div>
		<script type="text/javascript">
			$("#btn4").click(function(){
				$('.counter-demo-4').lemCounter();	
			})
		</script>
	</div>
	<hr>
	<div class="row" style="padding:2em 0;">
		<h3>事件:onComplete</h3>
		<pre>
$('.counter-event-demo-5').lemCounter({
value_to: 100
});
$('.counter-event-demo-5').on('onComplete.lc', function () {
$(this).css('color', 'red');
});				
		</pre>
		<div class="col-md-2">
			<div class="counter-demo-5 box">100</div>
		</div>
		<div class="col-md-10 btn-container">
			<button class="btn btn-info" id="btn5">点击开始执行</button>
		</div>
		<script type="text/javascript">
			$("#btn5").click(function(){
				$('.counter-demo-5').lemCounter({
				  value_to: 100
				});
				$('.counter-demo-5').on('onComplete.lc', function () {
				  $(this).css('color', 'red');
				});	
			})
		</script>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 切换按钮 表单 表单美化 表单插件 表单美化插件 文字滚动 文字无缝滚动 文字间歇滚动 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到