首页 > 网络编程 > JavaScript > javascript技巧 > javascript 闪烁的圣诞树

javascript 闪烁的圣诞树实现代码

2009-12-26 02:28:48 作者：

用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。

<html> 
<head> 
<title>christree</title> 
</head> 
<body style="background:#111"> 
<script type='text/javascript'> 
var $ = function(){ 
var dom = {}; 
return { 
get : function($){ 
if(!dom[$]) dom[$] = document.getElementById($); 
return dom[$]; 
} 
,apply : function(s,t,d){ 
if(t && typeof t == 'object') $.apply(s,d) 
if(s && t && typeof s == 'object' && typeof t == 'object'){ 
for(var i in t){s[i] = t[i]} 
} 
return s; 
} 
,createEl : function(attribute,tag){ 
if(!tag) tag = "DIV"; 
var el = document.createElement(tag); 
$.apply(el,attribute); 
return el; 
} 
} 
}() 
var chrisTree = function(params){ 
$.apply(this.param,params || {}) 
this.__construct(); 
} 
chrisTree.prototype = { 
param : {} 
,__construct : function(){ 
var x = this.param.x,y = this.param.y,xy=[]; 
for(var i=0;i<7;i++){ 
xy = this.createTree(x,y,i/4) 
x = xy[0]; 
y = xy[1]; 
} 
this.createRoot(x,y,xy[2]); 
} 
,createTree : function(x,y,level){ 
var lel = level || 0.1 
for(i=0;i<110*lel;i+=10){ 
for(j=i-10;j<2*i;j+=10){

var el = $.createEl({ 
id : "div_"+x+"_"+i+"_"+y+"_"+j 
},"span");

el.style.cssText = "width:5px;height:5px;position:absolute;left:"+(x - i*3/2 + j)+";top:"+(y+i)+";font-size:0px;background:#00ff00";

document.body.appendChild(el);

if(j == i-10) this.lightUp(el.id,x - i*3/2 + j,y+i); 
}

this.lightUp(el.id,x - i*3/2 + j,y+i); 
} 
return [this.param.x,this.param.y+110*lel,y+i] 
} 
,createRoot : function(x,y,l){ 
for(var i = 0;i<50;i++){ 
var el = $.createEl({ 
id : "div_"+x+"_"+i+"_"+y+"_"+j 
},"span");

el.style.cssText = "width:5px;height:5px;position:absolute;left:"+x+";top:"+(l+i)+";font-size:0px;background:#fff";

document.body.appendChild(el); 
} 
} 
,createText : function(text){ 
var el = $.createEl({ 
id : "text" 
,innerHTML : text 
,align:'center' 
}) 
el.style.cssText = "color:#fff;background:#fff:margin:4px;padding:3px;top:500px;left:500;font-size:20px;position:absolute";

document.body.appendChild(el);

} 
,lightUp : function(id,x,y){ 
var self = this,i=0; 
setTimeout(function(){ 
i++; 
$.get(id).style.background = self.lightColor[i%self.lightColor.length]; 
setTimeout(arguments.callee,200); 
},this.param.howToShine(x,y)) 
} 
,lightColor : ['#ff0000',"#00ff00","#ffff00","#ff6600","#66ff00"]

}

new chrisTree({ 
x : 400 
,y : 50 
,howToShine : function(x,y){return 100+x-y} 
})

new chrisTree({ 
x : 600 
,y : 50 
,howToShine : function(x,y){return Math.sqrt(x*x-2*x*y+y*y)*10} 
}) 
var ct = new chrisTree({ 
x : 800 
,y : 50 
,howToShine : function(x,y){return x+y} 
});ct.createText('Merry chrismas!:)))))'); 
</script>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 闪烁的圣诞树实现代码

您可能感兴趣的文章: