forked from halo-battle/game
225 lines
7.9 KiB
JavaScript
225 lines
7.9 KiB
JavaScript
function create(type,parent,id,classe)
|
|
{
|
|
var element = document.createElement(type);
|
|
if(id && !$(id)) element.setAttribute('id',id);
|
|
if(classe) Element.addClassName(element,classe);
|
|
if(parent) element = $(parent).appendChild(element);
|
|
return element;
|
|
}
|
|
|
|
var Effect =
|
|
{
|
|
queue : [],
|
|
|
|
hide : function(element)
|
|
{
|
|
element.style.display = 'none';
|
|
|
|
return element;
|
|
},
|
|
|
|
show : function(element)
|
|
{
|
|
element.style.display = '';
|
|
|
|
return element;
|
|
},
|
|
|
|
opacity : function(element,opacity)
|
|
{
|
|
element.style.opacity = opacity / 100;
|
|
element.style.MozOpacity = opacity / 100;
|
|
element.style.KhtmlOpacity = opacity / 100;
|
|
element.style.filter = "alpha(opacity="+ opacity +")";
|
|
|
|
return element;
|
|
},
|
|
|
|
style : function(element,style)
|
|
{
|
|
for(var property in style)
|
|
{
|
|
if(property == 'opacity') Effect.opacity(element,style[property]);
|
|
else element.style[property] = style[property];
|
|
}
|
|
|
|
return element;
|
|
},
|
|
|
|
animate : function(element,style,speed) //usage : Effect.animate(element,{backgroundColor: [[0,0,0],[0,255,255]], fontSize: [12,14,'px']},500)
|
|
{
|
|
for(var i = 0; i < Effect.queue.length; i++) if(Effect.queue[i] == element) return false;
|
|
Effect.queue.push(element);
|
|
|
|
var anim = {};
|
|
var noanim = {};
|
|
|
|
var dif = 0;
|
|
|
|
for(var property in style)
|
|
{
|
|
if(typeof style[property] == 'string')
|
|
noanim[property] = style[property];
|
|
|
|
else if(typeof style[property] == 'number')
|
|
anim[property] = [!element.style.property ? 0 : element.style.property , style[property]];
|
|
|
|
else if(typeof style[property] == 'object')
|
|
{
|
|
if(style[property].length == 1)
|
|
noanim[property] = style[property][0];
|
|
|
|
else if(style[property].length == 2 || style[property].length == 3)
|
|
{
|
|
if(typeof style[property][0] == 'number' && typeof style[property][1] == 'number')
|
|
{
|
|
anim[property] = style[property];
|
|
}
|
|
|
|
else if(typeof style[property][0] == 'number' && typeof style[property][1] == 'string')
|
|
{
|
|
anim[property] = [!element.style[property] ? 0 : element.style[property].substr(0,element.style[property].length - style[property][1].length) , style[property][0], style[property][1]];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Effect.style(element,noanim);
|
|
|
|
for(var property in anim) dif = dif < Math.abs(anim[property][0] - anim[property][1]) ? Math.abs(anim[property][0] - anim[property][1]) : dif;
|
|
|
|
for(var i=1; i <= dif ;i++)
|
|
{
|
|
|
|
for(var property in anim)
|
|
{
|
|
var from = Number(anim[property][0]);
|
|
var to = Number(anim[property][1]);
|
|
var ext = typeof anim[property][2] != 'undefined' ? anim[property][2] : 0;
|
|
|
|
var count = Math.floor(from + i*(to - from) / dif);
|
|
|
|
var funct = function()
|
|
{
|
|
var style = {};
|
|
style[this.property] = this.count+this.ext;
|
|
Effect.style(element,style);
|
|
};
|
|
|
|
setTimeout(funct.bind({property: property,count: count,ext: ext}),Math.floor(i/dif*speed));
|
|
}
|
|
}
|
|
setTimeout(function(){for(var i = 0; i < Effect.queue.length; i++) if(Effect.queue[i] == element) Effect.queue[i] = null},speed+10);
|
|
return element;
|
|
},
|
|
|
|
fadeIn: function(element,speed)
|
|
{
|
|
Effect.animate(element,{visibility: 'visible',opacity: [0,100]},speed);
|
|
},
|
|
|
|
fadeOut: function(element,speed)
|
|
{
|
|
Effect.animate(element,{opacity: [100,0]},speed);
|
|
setTimeout(function(){Effect.style(element,{visibility: 'hidden'})},speed);
|
|
},
|
|
|
|
move : function(element,relative,from,to,speed)
|
|
{
|
|
switch(relative)
|
|
{
|
|
case 'top':
|
|
case 'left':
|
|
case 'bottom':
|
|
case 'right':
|
|
var anim = {};
|
|
anim[relative] = [from,to,'px'];
|
|
Effect.animate(element,anim,speed);
|
|
}
|
|
}
|
|
};
|
|
|
|
/*Element.prototype.effect.hide = function()
|
|
{
|
|
return Effect.hide(this);
|
|
};
|
|
|
|
Element.prototype.effect.show = function()
|
|
{
|
|
return Effect.show(this);
|
|
};*/
|
|
|
|
Object.extend(Element.prototype,{
|
|
opacity : function(opacity)
|
|
{
|
|
return Effect.opacity(this,opacity);
|
|
},
|
|
|
|
setStyle : function(style)
|
|
{
|
|
return Effect.style(this,style);
|
|
},
|
|
|
|
animate : function(style,speed)
|
|
{
|
|
return Effect.animate(this,style,speed);
|
|
},
|
|
|
|
fadeIn : function(speed)
|
|
{
|
|
return Effect.fadeIn(this,speed);
|
|
},
|
|
|
|
fadeOut : function(speed)
|
|
{
|
|
return Effect.fadeOut(this,speed);
|
|
},
|
|
|
|
move : function(relative,from,to,speed)
|
|
{
|
|
return Effect.move(this,relative,from,to,speed);
|
|
}
|
|
});
|
|
|
|
Element.addMethods();
|
|
|
|
/*Element.prototype.opacity = function(opacity)
|
|
{
|
|
return Effect.opacity(this,opacity);
|
|
};
|
|
|
|
Element.prototype.setStyle = function(style)
|
|
{
|
|
return Effect.style(this,style);
|
|
};
|
|
|
|
Element.prototype.animate = function(style,speed)
|
|
{
|
|
return Effect.animate(this,style,speed);
|
|
};
|
|
|
|
Element.prototype.fadeIn = function(speed)
|
|
{
|
|
return Effect.fadeIn(this,speed);
|
|
};
|
|
|
|
Element.prototype.fadeOut = function(speed)
|
|
{
|
|
return Effect.fadeOut(this,speed);
|
|
};
|
|
|
|
Element.prototype.move = function(relative,from,to,speed)
|
|
{
|
|
return Effect.move(this,relative,from,to,speed);
|
|
};*/
|
|
|
|
/*create('div',document.body,'test2');
|
|
myfunct = function(){ $('test2').innerHTML += this.i };
|
|
for(var i = 1; i < 20; i++)
|
|
{
|
|
setTimeout(myfunct.bind({i:i}),1000*i);
|
|
}*/
|
|
|
|
/*var masque = [/#([0-9A-F]{6}|[0-9A-F]{3})/i,
|
|
/rgb\((\d{1,3})%?,(\d{1,3})%?,(\d{1,3})%?\)/i,
|
|
/\d+(px|pc|pt|ex|em|mm|cm|in|%)/i];*/
|