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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

71 280 94



特效描述:利用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>



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


热门标签: 滚动导航菜单 图片头像上传 滚动切换 文件上传 图片滚动 文本框 文字滚动 下拉框 复选 图片文字滚动 单选 全屏滚动 登录框 页面滚动 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 自动滚动图片轮播 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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