jQuery数字滚动计数器代码



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

401 1603 535



特效描述:jQuery数字滚动 计数器代码。jQuery简单的数字增加动画,数字滚动效果、计数器动画特效。ps:不兼容IE6,7,8,

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">

2. 引入JS

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>

3. HTML代码

<div class="demo">
		        <div class="container">
		            <div class="row">
		                <div class="col-md-3 col-sm-6">
		                    <div class="counter">
		                        <div class="counter-content">
		                            <i class="counter-icon fa fa-globe"></i>
		                            <span class="counter-value">1530</span>
		                            <h3 class="title">Web Design</h3>
		                        </div>
		                    </div>
		                </div>
		                <div class="col-md-3 col-sm-6">
		                    <div class="counter">
		                        <div class="counter-content">
		                            <i class="counter-icon fa fa-rocket"></i>
		                            <span class="counter-value">60</span>
		                            <h3 class="title">Web Development</h3>
		                        </div>
		                    </div>
		                </div>
		                <div class="col-md-3 col-sm-6">
		                    <div class="counter">
		                        <div class="counter-content">
		                            <i class="counter-icon fa fa-briefcase"></i>
		                            <span class="counter-value">380</span>
		                            <h3 class="title">Brand Building</h3>
		                        </div>
		                    </div>
		                </div>
		                <div class="col-md-3 col-sm-6">
		                    <div class="counter">
		                        <div class="counter-content">
		                            <i class="counter-icon fa fa-mobile"></i>
		                            <span class="counter-value">750</span>
		                            <h3 class="title">Responsive Design</h3>
		                        </div>
		                    </div>
		                </div>
		            </div>
				<div class="row">
					<div class="btn-container" style="width:150px;margin:0 auto;padding:2em 0;">
			        		<button id="btn" class="btn btn-success btn-block">重新开始计数器动画</button>
			        	</div>
				</div>
		        </div>
		    </div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#btn").click(function(){
				$('.counter-value').each(function(){
				        $(this).prop('Counter',0).animate({
				            Counter: $(this).text()
				        },{
				            duration: 3500,
				            easing: 'swing',
				            step: function (now){
				                $(this).text(Math.ceil(now));
				            }
				        });
				    });
			});
		});
	</script>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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