jQuery动态数字翻滚计数到指定数字的文字特效 JQuery.Running.js

最新推荐文章于 2024-08-16 10:12:21 发布

weixin_34278190

最新推荐文章于 2024-08-16 10:12:21 发布

阅读量442

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/pyghost/p/10675513.html

版权

代码：  <span class="animateNum" data-animatetarget="999.9">999.9</span>万

代码：柱形图跑动效果需要有固定的写法来布局一个柱形图。所以当你使用柱形跑动的时候，需要严格按下面的结构来书写。

<div class="prograss">
<div class="bar animateBar" data-animatetarget="100" style="width:80%;"></div>
</div>

代码：圆圈的Running首先需要制作一个圆圈，css3制作圆圈是很复杂的一道工序。jQuery.Running提供了一个最简洁有效的布局来完成一个圆圈的布局，同柱形跑动一样，你同样需要严格按照下面的结构来书写html。

<div class="prograss">
<div class="bar animateBar" data-animatetarget="100" style="width:80%;"></div>
</div>

代码下载：

链接：https://pan.baidu.com/s/1mbc0wel0o9MZhj_hsE8NKg 提取码：atg3

以下是修改版本的源码：

 * jQuery.Running.js - jQuery plugin for Running
 *
 * Copyright (c) 2007-2015 Qietu inc
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.qietu.com/p/jQuery.Running.js
 *
 * Version:  1.0.0
 *
 */

(function ($) {
    $.fn.running = function () {
        function n() {
            var t = $(".animateNum");
            var n = {top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height()};
            t.each(function () {
                var t = $(this).attr("data-animateTarget");
               //n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0),
                !$(this).data("start") && ($(this).data("start", !0),
                new AnimateNum({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };

        function b() {
            var t = $(".animateBar");
            var n = {top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height()};
            t.each(function () {
                var t = $(this).attr("data-animateTarget");
　　　　　　　　　　//不滚动也可以运行注释的代码
                //n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimateBar({
　　　　　　　　　　//恢复注释下面的代码，解注释上面的代码
                !$(this).data("start") && ($(this).data("start", !0), new AnimateBar({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };

        function p() {
            var t = $(".animatePie");
            var n = {top: $(window).scrollTop(), bottom: $(window).scrollTop() + $(window).height()};
            t.each(function () {
                var t = $(this).attr("data-animateTarget");
                //n.top <= $(this).offset().top + $(this).height() && n.bottom >= $(this).offset().top && !$(this).data("start") && ($(this).data("start", !0), new AnimatePie({
                !$(this).data("start") && ($(this).data("start", !0), new AnimatePie({
                    obj: $(this),
                    target: t,
                    totalTime: 1e3
                }))
            })
        };$(window).bind("load", function () { //如果是想刷新页面就直接加载动画，此处绑定的事件是load ,如果想滚动的时候加载，此处绑定是事件是scroll

            n();
            b();
            p()
        });

        function AnimateNum(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };

        function AnimateBar(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };

        function AnimatePie(t) {
            this.obj = t.obj, this.target = t.target.toString(), this.totalTime = t.totalTime || 1e3, this.init()
        };AnimateNum.prototype = {
            init: function () {
                return this.target ? (this.animation(), void 0) : !1
            }, animation: function () {
                var t = this, i = this.target.indexOf("."), e = 0;
                i >= 0 && (e = this.target.length - i - 1);
                var n = this.target.replace(".", ""), s = this.totalTime / 30 | 0, a = n / s | 0, r = 0, h = 0;
                t.timer = setInterval(function () {
                    r++, h += a, t.obj.html(h / Math.pow(10, e)), r >= s && (clearInterval(t.timer), t.obj.html(t.target))
                }, 30)
            }
        };
        AnimateBar.prototype = {
            init: function () {
                return this.target ? (this.animation(), void 0) : !1
            }, animation: function () {
                var t = this, i = this.target.indexOf("."), e = 0;
                i >= 0 && (e = this.target.length - i - 1);
                var n = this.target.replace(".", ""), s = this.totalTime / 30 | 0, a = n / s | 0, r = 0, h = 0;
                t.timer = setInterval(function () {
                    r++, h += a, t.obj.css('width', h / Math.pow(10, e) + '%'), r >= s && (clearInterval(t.timer), t.obj.animate({'width': t.target + '%'}))
                }, 30)
            }
        };
        AnimatePie.prototype = {
            init: function () {
                return this.target ? (this.animation(), void 0) : !1
            }, animation: function () {
                var t = this;
                s = this.totalTime / 60 | 0;
                r = 0;
                t.i = 0;
                t.count = 0;
                t.j = 0;
                num = t.target;

                function start1() {
                    t.obj.find('.pieInner span').html(t.i + 1);
                    if (num == 0) return false;
                    t.i = t.i + 1;
                    if (t.i == num) {
                        clearInterval(t.t1)
                    }
                    if (t.i == 50) {
                        clearInterval(t.t1);
                        num2 = num - 50;
                        t.t2 = setInterval(start2, 1)
                    }
                    ;t.obj.find(".pieLeftInner").css("-o-transform", "rotate(" + t.i * 3.6 + "deg)");
                    t.obj.find(".pieLeftInner").css("-moz-transform", "rotate(" + t.i * 3.6 + "deg)");
                    t.obj.find(".pieLeftInner").css("-webkit-transform", "rotate(" + t.i * 3.6 + "deg)")
                };

                function start2() {
                    t.obj.find('.pieInner span').html(50 + t.j + 1);
                    if (num2 == 0) return false;
                    t.j = t.j + 1;
                    if (t.j == num2) {
                        clearInterval(t.t2)
                    }
                    if (t.j == 50) {
                        clearInterval(t.t2)
                    }
                    ;t.obj.find(".pieRightInner").css("-o-transform", "rotate(" + t.j * 3.6 + "deg)");
                    t.obj.find(".pieRightInner").css("-moz-transform", "rotate(" + t.j * 3.6 + "deg)");
                    t.obj.find(".pieRightInner").css("-webkit-transform", "rotate(" + t.j * 3.6 + "deg)")
                };t.t1 = setInterval(function () {
                    r++;
                    r >= s && (clearInterval(t.timer), start1())
                }, 30)
            }
        }
    }
})(jQuery);