硬币翻转动画与数字计数

时间:2016-07-26 05:51:30

标签: javascript jquery html css jquery-animate

我想使用带有硬币翻转效果计数的动画,意味着我的数字计数我希望将我的圆圈水平翻转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;
&#13;
&#13;

0 个答案:

没有答案