信鸽网

javascript 闪烁的圣诞树实现代码

  作者：bea

<html> <head> <title>christree</title> </head> <body style="background:#111"> <script type='text/javascript'> var $ = function(){ var dom = {}; return { get : function($){ if(!dom[$]) dom[$] = docu



<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需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: