这是一款jquery计数器动画特效。该jquery计数器动画特效使用bootstrap网格系统进行布局,然后通过jQuery animate方法来制作炫酷的计数器动画特效。
使用方法
在页面中引入jquery,bootstrap.min.css和font-awsome.min.css文件。
<link href="dist/bootstrap.min.css" rel="stylesheet"> <link href="dist/font-awsome.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script>
HTML结构
计数器的HTML结构如下:
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <div class="counter-content"> <i class="counter-icon fa fa-globe"></i> <span class="counter-value">75</span> <h3 class="title">Web Design</h3> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <div class="counter-content"> <i class="counter-icon fa fa-rocket"></i> <span class="counter-value">100</span> <h3 class="title">Web Development</h3> </div> </div> </div> </div> </div>
CSS样式
为计数器添加下面的CSS样式:
.counter{ background: #7a7fb6; text-align: center; position: relative; } .counter .counter-content{ padding: 30px 20px 50px; color: #fff; position: relative; } .counter:before, .counter:after, .counter .counter-content:before, .counter .counter-content:after{ content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; box-shadow: inset 0 2px 2px #000; top: 15px; left: 15px; } .counter:after{ left: auto; right: 15px; } .counter .counter-content:before, .counter .counter-content:after{ box-shadow: inset 0 -2px 2px #000; top: auto; bottom: 15px; } .counter .counter-content:after{ left: auto; bottom: 15px; right: 15px; } .counter .counter-icon{ display: inline-block; font-size: 40px; margin-bottom: 15px; } .counter .counter-value{ display: block; font-size: 50px; margin-bottom: 15px; } .counter .title{ font-size: 20px; text-transform: uppercase; text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.71); } @media only screen and (max-width: 990px){ .counter{ margin-bottom: 20px; } }
Javascript
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery计数器。
$('.counter-value').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 3500, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!