Увеличение чисел на jquery

  • Team9 месяцев назад
    Как сделать, чтобы увеличение чисел начиналось, когда пользователь прокручивает страницу вниз?

    Пример взят отсюда

    <ul>
    <li>Сообщений<span class="count">37</span></li>
    <li>Необработанных заявок<span class="count">16</span></li>
    <li>Принятых звонков<span class="count">24</span></li>
    <li>Всего клиентов<span class="count">7</span></li>
    </ul>


    html{
    height: 100%;
    }

    body{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    background: #FF5722;
    }


    ul {
    list-style-type:none;
    width: 280px;
    margin: 20px auto;
    padding: 0;
    }

    ul li {
    position: relative;
    display: block;
    background: #fff;
    color: #333;
    border-top: 1px solid #dbdcd2;
    padding: 18px;
    text-transform: uppercase;
    }

    ul li span:before {
    content: "+";
    }

    ul li span {
    font-size: 12px;
    float: right;
    background: #FF5722;
    color: #fff;
    padding: 3px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    }

    li.header {
    background: #878e9c;
    color: #fff;
    }


    $(document).ready(function () {

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

    });
    Ответов: 1
  • Nicket9 месяцев назад
    .animate_num {
    width:100%;
    height: 1280px;
    position:relative;
    }


    <div class="animate_num">
    </div>
    <div id="counter">
    <div class="counter-value" data-count="300">0</div>
    <div class="counter-value" data-count="400">100</div>
    <div class="counter-value" data-count="1500">200</div>
    </div>
    <div class="animate_num">
    </div>


    $(document).ready(function () {

    var a = 0;
    $(window).scroll(function() {

    var oTop = $('#counter').offset().top - window.innerHeight;
    if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
    var $this = $(this),
    countTo = $this.attr('data-count');
    $({
    countNum: $this.text()
    }).animate({
    countNum: countTo
    },

    {

    duration: 1500,
    easing: 'swing',
    step: function() {
    $this.text(Math.floor(this.countNum));
    },
    complete: function() {
    $this.text(this.countNum);
    }

    });
    });
    a = 1;
    }

    });

    });
Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.