我想使用带有硬币翻转效果计数的动画,意味着我的数字计数我希望将我的圆圈水平翻转360度。
我正在使用以下代码:
亲切的帮助!提前致谢
(function ($) {
$.fn.CountUpCircle = function(options){
var self = this;
var settings = $.extend({
duration: 1000 //ms
}, options);
var toCount = parseInt(this.html());
console.log("Count up to " + toCount);
var i = 0;
var step = settings.duration / toCount;
console.log("Step duration " + step);
var displayNumber = function() {
i++;
self.html(i);
if (i < toCount) {
setTimeout(displayNumber, step);
}
};
displayNumber();
}
}(jQuery));
$(document).ready(function(){
$('#count-box').CountUpCircle({
duration: 1500
});
});
&#13;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>
<link href="http://www.jqueryscript.net/demo/Minimal-jQuery-Count-Up-Plugin-CoutUpCircle/css/style.css" rel="stylesheet"/>
<div id="jquery-script-menu">
<h1 style="margin-top:150px; color:#fff;" align="center">CountUpCircle jQuery Plugin Demo</h1>
<div id="count-box">23</div>
</div>
&#13;