jQuery數字滾動增長動畫特效代碼



169 675 226



特效描述:jQuery 數字滾動增長動畫,jQuery數字滾動增長動畫特效代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/jquery.running.css">
<link rel="stylesheet" href="css/docs.css">

2. 引入JS

<script src="js/html5.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.running.min.js"></script>
<script type="text/javascript" src="js/docs.js"></script>

3. HTML代碼

<div class="wrapper">
<div class="slider">
    <h1>jQuery.Running.js</h1>
    <p>jQuery.Running.js (奔跑吧,數字!)是一款可以讓數字,柱形圖,餅形圖跑起來的插件,支持滾動條響應。壓縮后文件大小僅4k。</p>
</div>
<section>
	<h1>使用方法</h1>
    <p>加載jQuery.Running.css 樣式文件</p>
    <pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/jquery.running.css&quot;&gt;</pre>
    <p>調用jQuery類庫和jQuery.Running.min.js文件</p>
	<pre>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.7.2.js&quot;&gt;&lt;/script&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.running.js&quot;&gt;&lt;/script&gt;</pre>	
	<p>啟用插件 $(container).running();</p>
    <pre>$(function(){
$('body').running();
})</pre>
	<h1>效果演示</h1>
    <div class="list">
    	<div class="item selected">
            <div class="text">
            	<h2>
              數字跑動場景</h2>
                <div class="attr">
                	<dl>
                    	<dd class="d1">
                        	<h4>目標額</h4>
                            <h3><span class="animateNum" data-animatetype="num" data-animatetarget="999.9">999.9</span>萬</h3>
                        </dd>
                    	<dd class="d2">
                        	<h4>已完成</h4>
                            <h3><span class="animateNum" data-animatetarget="30">30</span>%</h3>
                        </dd>
                    	<dd class="d3">
                        	<h4>已認投</h4>
                            <h3><span class="animateNum" data-animatetarget="999.9">999.9</span>萬</h3>
                        </dd>
                  </dl>
                </div>
                <h2>代碼</h2>
                <pre>&lt;span class=&quot;animateNum&quot; data-animatetarget=&quot;999.9&quot;&gt;999.9&lt;/span&gt;萬</pre>
            </div>
        </div>
        <!--//item-->
        <div class="item selected">
          <div class="text">
            	<h2>
                    柱形圖跑動場景             </h2>
                    <h3>目標額</h3>
                <div class="prograss">
                	<div class="bar animateBar" data-animatetarget="30" style="width:30%;"></div>
                </div>
                 <h3>已完成</h3>
                <div class="prograss">
                	<div class="bar animateBar" data-animatetarget="80" style="width:80%;"></div>
                </div>
                 <h3>已認投</h3>
            <div class="prograss">
                	<div class="bar animateBar" data-animatetarget="100" style="width:80%;"></div>
            </div>
                  <h2>代碼</h2>
                    <p>柱形圖跑動效果需要有固定的寫法來布局一個柱形圖。所以當你使用柱形跑動的時候,需要嚴格按下面的結構來書寫。</p>
                  <pre>&lt;div class=&quot;prograss&quot;&gt;<br>&lt;div class=&quot;bar animateBar&quot; data-animatetarget=&quot;100&quot; style=&quot;width:80%;&quot;&gt;&lt;/div&gt;<br>&lt;/div&gt;</pre>
         </div>
        </div>
        <!--//item-->
        <div class="item">
          <div class="text">
            	<h2>
                   圓圈統計圖跑動場景                </h2>
                <h3>目標額</h3>
                <!--pie-->
                    <div class="pie animatePie" data-animatetarget="65">
                    <div class="pieLeft">
                      <div class="pieLeftInner"></div>
                    </div>
                    <div class="pieRight">
                      <div class="pieRightInner"></div>
                    </div>
                    <div class="pieInner"><span>65</span>%</div>
                    </div>
                    <!--//pie-->
                     <h3>已完成</h3>
                    <!--pie-->
                    <div class="pie animatePie" data-animatetarget="65">
                    <div class="pieLeft">
                      <div class="pieLeftInner"></div>
                    </div>
                    <div class="pieRight">
                      <div class="pieRightInner"></div>
                    </div>
                    <div class="pieInner"><span>65</span>%</div>
                    </div>
                    <!--//pie-->
                    <h3>已認投</h3>
                    <!--pie-->
                    <div class="pie animatePie" data-animatetarget="65">
                    <div class="pieLeft">
                      <div class="pieLeftInner"></div>
                    </div>
                    <div class="pieRight">
                      <div class="pieRightInner"></div>
                    </div>
                    <div class="pieInner"><span>65</span>%</div>
                    </div>
                    <!--//pie-->
            <h1>代碼</h1>
                  <p>圓圈的Running首先需要制作一個圓圈,css3制作圓圈是很復雜的一道工序。jQuery.Running提供了一個最簡潔有效的布局來完成一個圓圈的布局,同柱形跑動一樣,你同樣需要嚴格按照下面的結構來書寫html。</p>
                  <pre>&lt;div class=&quot;pie animatePie&quot; data-animatetarget=&quot;65&quot;&gt;<br>&lt;div class=&quot;pieLeft&quot;&gt;<br>&lt;div class=&quot;pieLeftInner&quot;&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div class=&quot;pieRight&quot;&gt;<br>&lt;div class=&quot;pieRightInner&quot;&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div class=&quot;pieInner&quot;&gt;&lt;span&gt;65&lt;/span&gt;%&lt;/div&gt;<br>&lt;/div&gt;</pre>
            </div>
        </div>
        <!--//item-->
        <!--//item-->
        <!--//item-->
        <!--//item-->
    </div>
</section>
</div>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滑動星星打分 延遲加載 無限加載 延遲 加載 其他 加載動畫 文字滾動 文字無縫滾動 文字間歇滾動 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子