Jquery函数和使用cpu加载100%

时间:2013-07-05 09:27:14

标签: jquery animation

我把我的代码清理干净,知道问题以及为什么当加载cpu得到100%时,我在firefox和其他导航器中看到chrome问题cpu 100%当网站加载这个动画时,我不知道是什么'不好但只在加载这个网站和这个动画时发生

$.fn.stars=function(settings) {
        var config = {
            'i' : '',    // image URL
            'c' : 50,    // clear: radius around the mouse to not fill with stars
            'd' : .00005,// density: how many stars per pixel to show - KEEP IT LOW!
            'm' : 100,    // maximum size of stars
            's' : 1000,  // speed (in ms) of star appearance
            'l' : 2000,  // length of time star stays on page
            'f' : 2000,  // fading time
            'h' : 2000   // max hide time before a star appears again somewhere else
        };
        if (settings) {
            $.extend(config, settings);
        }
        config.s+=config.h;
        config.l+=config.s;
        config.f+=config.l;
        function getTransformProperty() {
            var properties = ['transform', 'WebkitTransform', 'MozTransform'];
            var p;
            while (p = properties.shift()) {
                if (typeof document.body.style[p] != 'undefined') {
                    return p;
                }
            }
            return false;
        }
        this.each(function() {
            var w=this.offsetWidth, h=this.offsetHeight;
            var ol=this.offsetLeft, ot=this.offsetTop;
            var canvas=this;
            var pixels=w*h;
            var num_stars=pixels*config.d;
            function create_star(){
                var t=Math.random()*config.h;
                var $e;
                var s=config.m*Math.random();
                var pl=ol+(w-s)*Math.random();
                var pt=ot+(h-s)*Math.random();
                setTimeout(function(){
                    var html=config.i==''?'<div class="star">*</div>':'<img class="star" src="'+config.i+'" />';
                    $e=$(html)
                        .css({
                            "width":0,
                            "height":0,
                            "position":"absolute",
                            "left":pl+s/2,
                            "top":pt+s/2
                        });
                    $e
                        .appendTo(canvas)
                        .animate({
                            "width":s,
                            "height":s,
                            "left":pl,
                            "top":pt
                        },config.s,'linear');
                },t);
                setTimeout(function(){
                    $e
                        .animate({
                            "width":0,
                            "height":0,
                            "left":pl+s/2,
                            "top":pt+s/2
                        },config.f-config.l);
                },t+config.l,'linear');
                setTimeout(function(){
                    $e.remove();
                    setTimeout(create_star, 1);
                },t+config.f);
            }
            for (var i=0; i<num_stars; ++i) {
                create_star();
            }
        });
        function rotate(){
            $('.star').each(function(){
                if (!this.trProp) {
                    this.trProp=getTransformProperty();
                    this.deg=Math.random()*360;
                    this.speed=Math.random()*5;
                }
                this.deg=(this.deg+this.speed)%360;
                this.style[this.trProp]='rotate('+this.deg+'deg)';
            });
            setTimeout(rotate, 40);
        }
        rotate();
        return this;
    };

请我尝试知道它有什么不好,我向人们提供帮助以了解问题或解决此问题的最佳配置

你可以在这里看到这个测试:http://jsfiddle.net/QrnZj/

谢谢,问候

0 个答案:

没有答案