我把我的代码清理干净,知道问题以及为什么当加载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/
谢谢,问候