jQuery实现数字滚动特效插件

jQuery实现数字滚动特效插件

用counterup实现数字滚动,用waypoints监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果。

JS代码文件

1
2
3
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div class="slide1">
  <div class="center">
      请向下滑动页面
  </div>
  <ul class="counter_list">
      <li class="counter_item">
          <div class="counter">
              999
          </div>
         
      </li>
      <li class="counter_item">
          <div class="counter">
              8,888,888
          </div>
         
      </li>
      <li class="counter_item">
          <div class="counter">
              999,999
          </div>
         
      </li>
  </ul>
</div>
<div class="slide1">
  <div class="center">
      每次出现都会有数字滚动效果
  </div>
  <ul class="counter_list">
      <li class="counter_item">
          <div class="counter">
              100,000
          </div>
         
      </li>
      <li class="counter_item">
          <div class="counter">
              8,888,888
          </div>
         
      </li>
      <li class="counter_item">
          <div class="counter">
              999,999
          </div>
         
      </li>
  </ul>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论