jQuery數字滾動計數器代碼



199 792 265



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



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 加載動畫 自動滾動圖片輪播 滑動星星打分 h5彈窗動畫 html5彈窗動畫 切換按鈕 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 表單 表單美化 表單插件 表單美化插件 其他 h5按鈕動畫 html5按鈕動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 文字滾動 文字無縫滾動 文字間歇滾動 計時器 倒計時插件 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表