號碼數開始，當我們到達那個點

我們在腳本上做數量計數，但問題是，當我們刷新，並得到頁碼計數開始，但我們想要當任何一個去那個數字或點，然後數字計數開始。號碼數開始，當我們到達那個點

的CSS： -

.office{padding-right: 5px; padding-left: 5px;} 
.office div{margin-bottom:5px;} 
.office i {margin-right:0px;} 
.office i img{width: 35px; height: 35px;} 
.office div span{ font-size: 36px; position: relative; top: 10px;} 
.office p{ font-size: 13px; margin:0; padding:0;}

JS： -

$(document).ready(function() { 
$('.count').each(function() { 
    $(this).prop('Counter',0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text(Math.ceil(now)); 
     } 
    }); 
}); 
});

HTML： -

<div class="row"> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <div class="col-md-12 m-b-xm"> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/office-ico.jpg" alt=""></i> 
    <span class="count">10</span> 
    </div> 
    <p>Offices Worldwide</p> 
</div> 
<div class="col-xs-4 office"> 
    <div> 
    <i><img src="images/hard-ico.jpg" alt=""></i> 
    <span class="count" data-speed="1000">180</span> 
    </div> 
    <p>Hardworking People</p> 
</div> 
<div class="col-xs-4 office"> 
    <div> 
    <i><img src="images/coun-ico.jpg" alt=""></i> 
    <span class="count">06</span> 
    </div> 
    <p>Countries Covered</p> 
</div> 
<div class="clearfix"></div> 
    </div> 
</div>

請檢查鏈接到完整的工作代碼： - Jsfiddle

來源

2016-11-15 Bharat Negi

您是否希望在用戶重新加載頁面時，計數器不會從一個頁面重新開始，而是從頁面重新加載時已達到的值繼續？ –

如果你的目標是啓動計數器，當用戶滾動到它並且它出現在屏幕上時，請查看[在這裏]描述的幫助器函數（http://stackoverflow.com/questions/487073/check-if-element -is可見，後滾動）。當你期望元素的可見性可能已經改變時（例如在滾動事件上），你需要調用它。 –

我已經改變了你編寫一個位。檢查這樣

<span class="count" data-count="10">10</span>

此使用fiddle

數據屬性，我們可以跟蹤計數，然後增加它。

來源

2016-11-15 07:43:44 Afsar

感謝這是oky，但我在頁面上的這個動作與自動啓動滾動 –

@BharatNegi我已經更新了小提琴，根據您的要求。退房 – Afsar

感謝兄弟，它正在工作 –

<div class="row"> 

    <div id="startcount"class="col-md-12 m-b-xm"> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/office-ico.jpg" alt=""></i> 
     <span class="count">10</span> 
     </div> 
     <p>Offices Worldwide</p> 
    </div> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/hard-ico.jpg" alt=""></i> 
     <span class="count" data-speed="1000">180</span> 
     </div> 
     <p>Hardworking People</p> 
    </div> 
    <div class="col-xs-4 office"> 
     <div> 
     <i><img src="images/coun-ico.jpg" alt=""></i> 
     <span class="count">06</span> 
     </div> 
     <p>Countries Covered</p> 
    </div> 
    <div class="clearfix"></div> 
    </div> 
</div>

JAVASCRIPT： -

$(document).ready(function() { 
document.getElementById("startcount").onmouseover = function() { 
$('.count').each(function() { 
     $(this).prop('Counter',0).animate({ 
      Counter: $(this).text() 
     }, { 
      duration: 4000, 
      easing: 'swing', 
      step: function (now) { 
       $(this).text(Math.ceil(now)); 
      } 
     }); 
    }); // code to run when the user hovers over the div 
}; 
});

我認爲這是解決你的問題......

來源

2016-11-15 07:34:02

拉吉夫在小提琴上工作！ – Afsar

號碼數開始，當我們到達那個點

回答

相關問題