Question

如何将计数设置为不自动运行？我想在滚动它时开始计数

HTML代码：

Array
(
    [0] => "Chess helps us overcome difficulties and sufferings," said Unnikrishnan, taking my queen. 
    [1] => "On a chess board you are fighting. as we are also fighting the hardships in our daily life."
)

Javascript代码：`

<!-- COUNT UP -->
    <div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div-->
        <div class="container">
            <div class="row">

                <h2>The <b>Count</b></h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br>Lorem Ipsum has been the industry's standard</p>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <h3 class="counter" data-count="350">0</h3>
                    <h4>Project</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-coffee" aria-hidden="true"></i>
                    <h3 class="counter" data-count="755">0</h3>
                    <h4>Coffee</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <h3 class="counter" data-count="2500">0</h3>
                    <h4>Smile</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-users"></i>
                    <h3 class="counter" data-count="50">0</h3>
                    <h4>Employee</h4>
                </div>

            </div>
        </div>
    </div>
    <!-- END COUNT UP -->

这就是ss：

Answer 1

$('.counter').hover(
function(){
var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 5000,
    easing:'linear',
    step: function() {
      $this.text(Math.ceil(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="countup" class="countup parallax-window" data-parallax="scroll" data-image-src="img/basic/background-count.jpg"><!-- start countup div-->
        <div class="container">
            <div class="row">

                <h2>The <b>Count</b></h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                <br>Lorem Ipsum has been the industry's standard</p>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <h3 class="counter" data-count="350">0</h3>
                    <h4>Project</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-coffee" aria-hidden="true"></i>
                    <h3 class="counter" data-count="755">0</h3>
                    <h4>Coffee</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    <h3 class="counter" data-count="2500">0</h3>
                    <h4>Smile</h4>
                </div>

                <div class="col-sm-3 col-md-3">
                    <i class="fa fa-users"></i>
                    <h3 class="counter" data-count="50">0</h3>
                    <h4>Employee</h4>
                </div>

            </div>
        </div>
    </div>

试试这个

Count Up自动启动

1 个答案: