jquery 實現(xiàn)數(shù)字倒計時滾動效果,jquery判斷數(shù)字內(nèi)容上面的高度,高度滾動完以后,執(zhí)行數(shù)字滾動效果,jquery部分均有注釋,可根據(jù)自己的需要更改相對應(yīng)的參數(shù)數(shù)值,達(dá)到自己需要的效果。此效果常用于企業(yè)建站,下載即可使用。
使用方法:
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.num.js"></script>
3、body引入HTML代碼
<div class="product-num-box">
<div class="product-num-content">
<div class="product-num-title">全線產(chǎn)品免費開放,等你加入</div>
<div class="product-num-text">我們致力于構(gòu)建最全面、最開放、最前沿的AI開放平臺</div>
<div class="product-num-text">提供最易用的API、SDK等開發(fā)組件,助力您快速高效地實現(xiàn)產(chǎn)品升級</div>
<div class="product-num-head">
<div class="product-num-item">
<span class="timer product-num-nub count-title" id="count-number" data-to="102" data-speed="102">0</span>
<span class="product-num-add">項</span>
<span class="product-num-inf">技術(shù)能力</span>
</div>
<div class="product-num-item">
<span class="timer product-num-nub count-title" id="count-number" data-to="24" data-speed="24">0</span>
<span class="product-num-add">小時</span>
<span class="product-num-inf">快速集成</span>
</div>
<div class="product-num-item">
<span class="timer product-num-nub count-title" id="count-number" data-to="54" data-speed="54">0</span>
<span class="product-num-wan">w</span>
<span class="product-num-add" style="font-size:32px; right:35px;">+</span>
<span class="product-num-inf">開發(fā)者正在使用</span>
</div>
</div>
<a href="#" class="product-num-jus">立即體驗</a>
</div>
</div>