<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src="prototypeTo.js"></script>
<script type="text/javascript" src="dynamic.js"></script>
<script type="text/javascript" src="menu.js"></Script>
<script type="text/javascript">
Event.observe(window,'load',initialize);
function initialize(){
List("menu1",new Dynamic.Animation({
deferDelay : {
startValue : 0,
endValue : 250
},
piste:[{
name : 'opacity',
startValue : 0,
endValue : 1,
duration : 500,
interpolation : {type:'cosinus'}
},{
name : 'backgroundColor',
deferOrigine: true,
startValue : [0,0,-53],
endValue :[0,0,0],
duration : 500,
interpolation : {type:'cosinus'}
}]
}),new Dynamic.Animation([{
name : 'backgroundColor',
deferOrigine: true,
startValue : [0,0,0],
endValue :[0,00,-53],
duration : 500,
interpolation : {type:'cosinus'}
},{
name : 'color',
deferOrigine: true,
startValue : [0,0,0],
endValue :[255,255,255],
duration : 500,
interpolation : {type:'cosinus'}
}]));
}
</script>
<TITLE>Menu Horizontal multi-niveaux</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="css.css">
</HEAD>
<BODY>
<h1>Menu horizontale</h1>
<ul id="menu1" class='menuH1'>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li><li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li><li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant !!!</a>
<ul>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
<li><a href="#">du contenue intérréssant
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
</ul>
</BODY>
</HTML>
---------------------------------------------------------------------------------------------------------------CSS:
h1{
color : green;
border-bottom:1px solid green;
border-left:10px solid green;
}
.menuH1{
font-family:Comic Sans MS;
font-size:13px;
cursor:pointer;
}
.menuH1 a{
color : inherit;
text-decoration:none;
}
.menuH1 li{
width : 200px;
text-align : bottom;
color:#123480;
border : 1px solid gray;
background-repeat:repeat-x;
padding : 5px;
background-color:#ffffff;
height : 20px;
margin: 0px;
list-style-type:none;
display:inline-block;
background-image:url("bg.png");
}
.menuH1 ul{
visibility:hidden;
position:relative;
display:inline-block;
padding: 0px;
left : -6px;/*-(la bordure gauche+padding gauche)*/
top : 7px;/*(hauteur de la li +bordure haute)- taille du text en pixel - (taille du text en pixel/2.5)....
(taille du text en pixel/2.5) a peux près = à marge du texte en fonction de sa taille */
}
.menuH1 ul li ul{
left:212px;/*taille de la li + bordure gauche et droite+padding gauche et droite*/
top : 0;/*obligé de lui indiqué je sais pas pk*/
position:absolute;
visibility:hidden;
}
-------------------------------------------------------------------------------------------------------------var Dynamic={
Animation : $class({
constructor : function(){
if(arguments.length>1){
var elements=arguments[0];
this.define=arguments[1];
}else this.define=arguments[0];
if(this.define instanceof Array)
this.define={piste:this.define};
if(this.define.name)
this.define={piste:[this.define]};
this.fps=this.define.fps || 25;
this.piste=[];
this.lengthAct=0;
for (var i= 0,length=this.define.piste.length; i < length; i++){
this.piste[i]=this.addPiste(this.define.piste[i]);
this.lengthAct=this.piste[i].lengthAct>this.lengthAct?this.piste[i].lengthAct:this.lengthAct;
}
if(elements)
return this.addPlayer(elements);
},
addPlayer : function(elements){
return new this.Player(elements instanceof Array?elements:[elements],this);
},
addPiste : function(piste){
if(/color|Color/.test(piste.name)){
return new this.Piste.Color(piste,this);
}else if(piste.name=='left' || piste.name=='top' || piste.name=='target'){
return new this.Piste.Position(piste,this);
}else if(piste.name=='opacity'){
return new this.Piste.Opacity(piste,this);
}else if(piste.name=='scale'){
return new this.Piste.Scale(piste,this);
}else return new this.Piste.ModelBox(piste,this);
},
Piste : $abstract({
constructor : function(define,animation){
this.define=define;
this.animation=animation;
$get([this.define,this.animation.define],'inOut,replay,deferOrigine,deferProportion,deferVariation,de
ferDuration,deferDelay,deferProportionToOrigine',this.define)
this.name=this.define.name;
this.lengthAct=0;
if(!this.define.key){
this.define.key=[this.define];
this.define.value=this.define.endValue;
}
for(var i=0,length=this.define.key.length;i<length;i++){
var key=this.define.key[i];
key.actLength=Math.floor(key.duration/this.animation.fps);
this.lengthAct+=key.actLength;
key.endAct=this.lengthAct;
key.startValue=i?this.define.key[i-1].value:this.define.startValue;
if(key.value.length){
key.difValue=[];
key.cumulStart=[];
for(var j=0,lengthj=key.value.length;j<lengthj;j++){
key.difValue[j]=key.value[j]-key.startValue[j];
key.cumulStart[j]=i?this.define.key[i-1].cumulStart[j]+this.define.key[i-1].difValue[j]:0;
}
}else{
key.difValue=key.value-key.startValue;
key.cumulStart=i?this.define.key[i-1].cumulStart+this.define.key[i-1].difValue:0;
}
if(!key.interpolation)
key.interpolation={type:'linear'};
else Dynamic.Interpolation.initializeInterpolation(this.define,key,i);
}
for(var i=0;i<length;i++)
this.define.key[i].endInverseAct=this.lengthAct-(this.define.key[i-1]?this.define.key[i-1].endAct:0);
},
Opacity : {
constructor : function(){
this.$super(arguments);
this.isIE=(navigator.appName == "Microsoft Internet Explorer");
},
getOrigine : function(element){
return Element.getStyle(element,this.name);
},
setValue : function(element,value){
element.style[this.isIE?'filter':this.name]=(this.isIE)?'alpha(opacity='+value*100+')':value;
}
},
ModelBox : {
constructor : function(){
this.$super(arguments);
},
getOrigine : function(element){
return parseInt(Element.getStyle(element,this.name));
},
setValue : function(element,value){
element.style[this.name]=value+'px';
}
},
Position : {
constructor : function(){
this.$super(arguments);
},
initializeElement : function(element){
var position=Element.getStyle(element,'position');
if(position!='relative' || position!='absolute')
Element.absolutize(element);
},
getOrigine : function(element){
return Element[this.name=='target'?'offsets':'offset'](element,this.name);
},
setValue : function(element,value){//$('beug').innerHTML+=value;
if(this.name=='target'){
element.style.left=value[0]+'px';
element.style.top=value[1]+'px';
}else element.style[this.name]=value+'px';
}
},
Scale : {
constructor : function(){
this.$super(arguments);
},
initializeElement : function(element){
if(this.define.scaleFrom){
var position=Element.getStyle(element,'position');
if(position!='relative' && position!='absolute')
Element.absolutize(element);
else{
var offsets = Element.offsets(element);
var dimensions = Element.getDimensions(element);
element._originalLeft = offsets[0];
element._originalTop = offsets[1];
element._originalWidth = dimensions.width;
element._originalHeight = dimensions.height;
}
element.style.left=element._originalLeft+'px';
element.style.top=element._originalTop+'px';
element.style._lastLeft=element._originalLeft;
element.style._lastTop=element._originalTop;
}
},
getOrigine : function(element){
var dimensions = Element.getDimensions(element);
return [dimensions.width,dimensions.height];
},
setValue : function(element,value){
element.style.width=value[0]+'px';
element.style.height=value[1]+'px';
if(this.define.scaleFrom){
var decayX=Math.floor(element._originalLeft+((element._originalWidth-value[0])*this.define.scaleFrom[0]));
var decayY=Math.floor(element._originalTop+((element._originalHeight-value[1])*this.define.scaleFrom[1]));
element.style.left=decayX+((parseInt(element.style.left) || element.style._lastLeft)-element.style._lastLeft)+'px';
element.style.top=decayY+((parseInt(element.style.top) || element.style._lastTop)-element.style._lastTop)+'px';
element.style._lastLeft=decayX;
element.style._lastTop=decayY;
}
}
},
Color : {
constructor : function(){
this.$super(arguments);
},
getOrigine : function(element){
return this.parseColor(Element.getStyle(element,this.name));
},
parseColor: function(color) {
if(/rgb/.test(color)){
var parseColor=color.slice(4,color.length-1).split(',');
for(var i=0;i<parseColor.length;i++)
parseColor[i]=parseInt(parseColor[i]);
}else{
var parseColor=[];
if(color.length==7 || color.length==4)color=color.slice(1,color.length);
var n=(color.length==3)?1:2;
for(var i=1;i<4;i++)
parseColor[i-1]=parseInt(color.slice((i*n)-n,(i*n)),16);
}
return parseColor;
},
setValue : function(element,value){
element.style[this.name]='rgb('+(function(){
for(var i=0,toReturn=[];i<3;i++)
if(value[i]>255){
toReturn[i]=255;
}else if(value[i]<0) {
toReturn[i]=0;
}else toReturn[i]=value[i];
return toReturn.join(',');
})()+')';
}
}
}),
Player : $class({
constructor : function(elements,animation){
this.animation=animation;
this.piste=animation.piste;
this.pisteLength=animation.piste.length;
this.elements=[];
this.defer=[];
this.length=elements.length;
for(var i=0;i<this.length;i++)
this.elements[i]=$(elements[i]);
for (var i= 0; i < this.pisteLength; i++)
this.defer[i]=this.initializedefer(this.animation.piste[i]);
this.maxLengthAct=0;this.lengthAct=[];
for (var i= 0; i < this.length; i++){
this.lengthAct[i]=[]
for (var j= 0; j < this.pisteLength; j++){
this.lengthAct[i][j]=((((this.piste[j].define.replay ||
0)+1)*(this.piste[j].define.inOut?2:1))*(this.piste[j].lengthAct/(this.defer[j].deferDuration?this.defer[j
].deferDuration.interpolated[i]:1)))+(this.defer[j].deferDelay?this.defer[j].deferDelay.interpolated[i]:
0);
this.maxLengthAct=this.lengthAct[i][j]>this.maxLengthAct?this.lengthAct[i][j]:this.maxLengthAct;
}
}
},
_defer :
['deferOrigine','deferProportion','deferValue','deferDuration','deferDelay','deferProportionToOrigine'
],
initializedefer : function(piste){
var defer={};
for(var i=0;i<6;i++){
var j=this._defer[i];
if(piste.define[j]){
defer[j]={};
define=piste.define[j];
if(typeof define!='function'){
if(typeof define=='object'){
defer[j].interpolation=define.interpolation || {type : 'linear'};
if(typeof define.startValue=='function'){
defer[j].startValue=define.startValue.call(this);
}else defer[j].startValue=define.startValue;
if(typeof define.endValue=='function'){
defer[j].endValue=define.endValue.call(this);
}else defer[j].endValue=define.endValue;
defer[j].actLength=this.length ;
defer[j].endAct=this.length;
defer[j].interpolated=[];
if(defer[j].endValue.length){
defer[j].difValue=[];
for(var h=0,lengthh=defer[j].endValue.length;h<lengthh;h++)
defer[j].difValue[h]=defer[j].endValue[h]-defer[j].startValue[h];
}else defer[j].difValue=defer[j].endValue-defer[j].startValue;
for(var k=0;k<this.length;k++){
defer[j].interpolated[k]=this.getdeferValue(defer[j],k+(k/(this.length-1 || 1)));
if(j=='deferDelay')
defer[j].interpolated[k]/=this.animation.fps;
}
}else if(j=='deferOrigine'){
var origine=this.getOrigine(piste);
defer[j]={interpolated:origine};
}else if(j=='deferProportionToOrigine'){
if(!origine)
origine=this.getOrigine(piste);
defer[j]={interpolated:[]};
for(var k=0;k<this.length;k++){
var key=piste.define.key[0];
if(key.value.length){
defer[j].interpolated[k]=[];
for(var l=0,length=key.value.length;l<length;l++)
defer[j].interpolated[k][l]=(key.value[l]-(origine[k][l]))/(key.value[l]-key.startValue[l]);
}else defer[j].interpolated[k]=(key.value-(origine[k]))/(key.value-key.startValue);
}
}
}
}
}
return defer;
},
getdeferValue : function(key,act){
var t=(key.actLength-(key.endAct-act))/key.actLength;
if(key.difValue.length){
for(var k=0,toReturn=[],length=key.difValue.length;k<length;k++)
toReturn[k]=Dynamic.Interpolation[key.interpolation.type](t,key.difValue[k],key.interpolation,k)+key
.startValue[k];
return toReturn;
}
return
Dynamic.Interpolation[key.interpolation.type](t,key.difValue,key.interpolation)+key.startValue;
},
getOrigine : function(piste){
var origine=[];
for(var k=0;k<this.length;k++)
origine[k]=piste.getOrigine(this.elements[k]);
return origine;
},
togglePlay : function(){
var time=new Date().getTime()
var cumulAct=(time-this.startAct)/this.animation.fps
this.startAct=time;
for (var i= 0; i < this.length; i++){
for (var j= 0; j < this.pisteLength; j++){
var player=this.player[i][j];
player.playInverse=!player.playInverse;
player.startAct=player.isFinish?(time-player.timeFinish)/this.animation.fps:player.isStart?0:player.startAct-cumulAct;
player.cumulAct=player.isFinish?0:player.currentAct-this.piste[j].lengthAct;
player.inOut=this.piste[j].define.inOut && !player.inOut?true:false;
player.replay=this.piste[j].define.replay ?this.piste[j].define.replay-player.replay:0;
if(player.isFinish){
player.isFinish=false;
this.player.countFinish++;
}
}
}
this.player.toggle=true;
},
playInverse : function(){
this.initializeplay(true);
},
play : function(){
this.initializeplay();
},
initializeplay : function(inverse){
this.inverse=inverse;
if(this.interval)
clearInterval(this.interval);
this.player=[];
this.player.countFinish=this.length*this.pisteLength;
for (var i= 0; i < this.length; i++){
this.player[i]=[];
for (var j= 0; j < this.pisteLength; j++){
var inOut=this.piste[j].define.inOut;
this.player[i][j]={
cumulAct : 0,
isStart : false,
currentKey:inverse && !inOut?this.piste[j].define.key.length-1: 0,
countFinish:0,
isFinish:false,
playInverse:inOut?false:inverse,
replay:this.piste[j].define.replay || 0,
inOut:this.piste[j].define.inOut,
startAct : inverse?this.maxLengthAct-this.lengthAct[i][j]:this.defer[j].deferDelay?this.defer[j].deferDelay.interpolated[i]:0
};
if(this.piste[j].initializeElement)
this.piste[j].initializeElement(this.elements[i]);
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[this.player[i][j].currentKey]
,inverse && !inOut?this.piste[j].lengthAct: 0,i,j));
}
}
if(this.animation.define.onStart)
this.animation.define.onStart.call(this);
this.startAct=new Date().getTime();
this.interval=setInterval(this.setInterval.bind(this), this.animation.fps);
},
setInterval : function(){
var time=new Date().getTime();
var cumulAct=(time-this.startAct)/this.animation.fps;
for (var i= 0; i < this.length; i++){
piste : for (var j= 0,player; j < this.pisteLength; j++){
if(!this.player[i][j].isFinish){
player=this.player[i][j];
if((player.startAct<cumulAct) && !player.isFinish){
if(!player.isStart)
player.isStart=true;
player.currentAct=((cumulAct-player.startAct)*(this.defer[j].deferDuration?this.defer[j].deferDuration.interpolated[i]:1))-player.cumulAct;
if((player.playInverse &&
player.currentAct>(this.piste[j].define.key[player.currentKey].endInverseAct)) || (!player.playInverse
&& player.currentAct>this.piste[j].define.key[player.currentKey].endAct)){
if(player.playInverse){
player.currentKey--;
}else player.currentKey++;
if(!this.piste[j].define.key[player.currentKey]){
if(player.inOut){
player.inOut=false;
player.playInverse=true;
player.cumulAct+=this.piste[j].lengthAct;
player.currentKey--;
player.currentAct=player.currentAct-this.piste[j].lengthAct;
}else if(player.replay){
var inOut=this.piste[j].define.inOut;
player.inOut=inOut;
player.playInverse=inOut?false:this.player.inverse;
player.cumulAct+=this.piste[j].lengthAct;
player.currentKey=this.player.inverse && !inOut?this.piste[j].define.key.length-1:
0;
player.replay--;
player.currentAct=player.currentAct-this.piste[j].lengthAct;
}else{
player.isFinish=true;
player.timeFinish=time-((player.currentAct-this.piste[j].lengthAct)*this.animation.fps);
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(player.playInverse?++play
er.currentKey:--player.currentKey)],this.piste[j].lengthAct,i,j,player.playInverse));
this.player.countFinish--;
if(!this.player.countFinish)
this.stop();
continue piste;
}
}
}
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[player.currentKey],player.
currentAct,i,j,player.playInverse));
}
}
}
}
},
getValue : function(key,act,i,j,inverse){
var t=inverse? 1-((key.actLength-(key.endInverseAct-act))/key.actLength):(key.actLength-(key.endAct-act))/key.actLength;
var
deferProportion=this.defer[j].deferProportion?this.defer[j].deferProportion.interpolated[i]:1;
var deferOrigine=this.defer[j].deferOrigine?this.defer[j].deferOrigine.interpolated[i]:0;
var
deferProportionToOrigine=this.defer[j].deferProportionToOrigine?this.defer[j].deferProportionToOri
gine.interpolated[i]:false;
var deferValue=this.defer[j].deferValue?this.defer[j].deferValue.interpolated[i]:0;
if(key.difValue.length){
for(var k=0,toReturn=[],length=key.value.length;k<length;k++)
toReturn[k]=Math.floor((Dynamic.Interpolation[key.interpolation.type](t,key.difValue[k],key.interpol
ation,k)+key.cumulStart[k])*(deferProportion instanceof
Array?deferProportion[k]:deferProportion)*(deferProportionToOrigine?deferProportionToOrigine[k]:
1))+(deferOrigine?deferOrigine[k]:0)+(deferProportionToOrigine?0:this.piste[j].define.startValue[k])+
(deferValue instanceof Array?deferValue[k]:deferValue);
return toReturn;
}
return
parseFloat((Dynamic.Interpolation[key.interpolation.type](t,key.difValue,key.interpolation)+key.cum
ulStart)*deferProportion*(deferProportionToOrigine ||
1))+deferOrigine+(deferProportionToOrigine?0:this.piste[j].define.startValue)+deferValue;
},
stop : function(innerCall){
clearInterval(this.interval);
this.interval=null;
if(!innerCall && this.animation.define.onFinish)
this.animation.define.onFinish.call(this);
},
loopPlayer : function(fn){
for (var i= 0; i < this.length; i++){
for (var j= 0; j < this.pisteLength; j++){
fn.call(this,i,j);
}
}
},
rewind : function(){
this.stop(true);
this.loopPlayer(function(i,j){
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(this.inverse &&
!this.piste[j].define.inOut?this.piste[j].define.key.length-1: 0)],this.inverse &&
!this.piste[j].define.inOut?this.piste[j].lengthAct:0,i,j));
});
},
forward : function(){
this.stop(true);
this.loopPlayer(function(i,j){
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(!this.piste[j].define.inOut
?this.piste[j].define.key.length-1: 0)],!this.piste[j].define.inOut?this.piste[j].lengthAct:0,i,j));
});
},
freeze : function(){
this.isFreeze=true;
this.timeFreeze=new Date().getTime();
this.stop(true);
},
unfreeze : function(){
if(this.isFreeze){
this.isFreeze=false;
this.startAct+=new Date().getTime()-this.timeFreeze;
this.interval=setInterval(this.setInterval.bind(this), this.animation.fps);
}
},
toggleFreeze : function(){
if(this.isFreeze)this.unfreeze();
else this.freeze();
}
})
}),
Interpolation : {
initializeInterpolation : function(piste,key,j){
var obj=key.interpolation;
switch(obj.type){
case 'spline' :
obj.ctangente=[];
for(var i=0;i<2;i++){
if(obj.tangente && obj.tangente[i]!==undefined)
obj.ctangente.push(obj.tangente[i]);
else if(i==0){
var subValue=(j>0)?piste.key[j-1].startValue:key.startValue;
var supValue=key.value;
}else{
var supValue=(piste.key[j+1])?piste.key[j+1].value:key.value;
var subValue=key.startValue;
}
if(key.startValue.length){
for(var k=0,tan=[],length=key.startValue.length;k<length;k++)
tan[k]=supValue[k]-subValue[k];
obj.ctangente.push(tan);
}else obj.ctangente.push(supValue-subValue);
}//alert(obj.ctangente)
break;
case 'quake' :
obj.intensity=obj.intensity || 0.2;
break;
case 'pulse' :case 'wobble' :
obj.inOut=obj.inOut || 5;
break;
case 'easeIn' :case 'easeOut' :case 'easeInOut' :
obj.acc=obj.acc || 2;
break;
case 'easeInOut_elastic' :case 'easeOut_elastic' :case 'easeIn_elastic' :
obj.elasticity=obj.elasticity || false;
obj.resistance=obj.resistance || 0.3;
break;
case 'easeIn_back' :case 'easeOut_back' :case 'easeInOut_back' :
obj.acc=obj.acc || 2;
obj.back=obj.back || 1.70158;
break;
case 'spiraleOut' :case 'spiraleIn' :
if(obj.angleStart && obj.angleStart.length){
for(var i=0,length=obj.angleStart.length;i<length;i++)
obj.angleStart[i]=obj.angleStart[i]*Math.PI/180;
}else obj.angleStart=(obj.angleStart===undefined)?45:obj.angleStart;
if(obj.angleEnd && obj.angleEnd.length){
for(var i=0,length=obj.angleEnd.length;i<length;i++)
obj.angleEnd[i]=obj.angleEnd[i]*Math.PI/180;
}else obj.angleEnd=(obj.angleEnd===undefined)?135:obj.angleEnd;
obj.accDecay=obj.accDecay || 1;
if(obj.angleEnd.length){
obj.rayon=[];
for(var i=0,length=obj.angleEnd.length;i<length;i++)
obj.rayon[i]=1/Math.sin(obj.angleEnd[i]);
}else obj.rayon=1/Math.sin(obj.angleEnd);
if(obj.revolution && obj.revolution.length){
for(var i=0,length=obj.revolution.length;i<length;i++)
obj.revolution[i]=obj.revolution[i]*Math.PI*2;
}else obj.revolution=(obj.revolution || 3)*Math.PI*2;
break;
}
},
linear : function(t,d){
return d*t;
},
spline : function(t,d,obj,k){
var tan1=k!==undefined?obj.ctangente[0][k]:obj.ctangente[0];
var tan2=k!==undefined?obj.ctangente[1][k]:obj.ctangente[1];
return (-2 * Math.pow(t,3) + 3 * Math.pow(t,2))*d+(Math.pow(t,3) - 2 * Math.pow(t,2) +
t)*(tan1)+(Math.pow(t,3) - Math.pow(t,2))*(tan2);
},
cosinus : function(t,d,obj){
return d/2*Math.cos((1-t)* Math.PI)+(d/2);
},
quake : function(t,d,obj,k){
var intensity=k!==undefined && obj.intensity.length?obj.intensity[k]:obj.intensity;
return d*(((-Math.cos(t*Math.PI)/2) + 0.5) + ((t==1)?0:Math.random()*intensity));
},
nova : function(t,d,obj){
return d*Math.random();
},
pulse : function(t,d,obj,k){
var inOut=k!==undefined && obj.inOut.length?obj.inOut[k]:obj.inOut;
return d*(Math.floor(t*inOut) % 2 == 0 ? (t*inOut-Math.floor(t*inOut)) : 1-(t*inOut-Math.floor(t*inOut)));
},
wobble : function(t,d,obj,k){
var inOut=k!==undefined && obj.inOut.length?obj.inOut[k]:obj.inOut
return d*((-Math.cos(t*Math.PI*(inOut*t))/2) + 0.5);
},
spiraleOut : function(t,d,obj,k){
var angleEnd=k!==undefined && obj.angleEnd.length?obj.angleEnd[k]:obj.angleEnd;
var angleStart=k!==undefined &&
obj.angleStart.length?obj.angleStart[k]:obj.angleStart;
var accDecay=k!==undefined && obj.accDecay.length?obj.accDecay[k]:obj.accDecay;
var revolution=k!==undefined &&
obj.revolution.length?obj.revolution[k]:obj.revolution;
var rayon=k!==undefined && obj.rayon.length?obj.rayon[k]:obj.rayon;
var accD=(accDecay)?Math.sin(Math.pow(t,accDecay)* Math.PI/2):t;
var decay=((1-accD)*t)+accD;
return rayon*d*decay*Math.sin(angleStart+t*(angleEnd-angleStart+revolution));
},
spiraleIn : function(t,d,obj){
t=1-t;
var accD=(obj.accDecay)?Math.sin(Math.pow(t,obj.accDecay)* Math.PI/2):t;
var decay=((1-accD)*t)+accD;
return d+obj.rayon*d*decay*Math.sin(-obj.angleStart+t*(-obj.angleEnd+obj.angleStart+obj.revolution));
},
easeIn : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
return d*Math.pow(t,acc);
},
easeOut : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
return d*Math.pow(t,1/acc);
},
easeInOut : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
if ((t*=2)< 1) return d/2*Math.pow(t,acc);
return d/2*(1-Math.pow(1-(t-1),acc))+d/2;
},
easeInOut_elastic : function(t,d,obj,k) {
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if ((t*=2)==2) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
if (t < 1) return -.5*(elasticity *Math.pow(2,10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance )) ;
return elasticity *Math.pow(2,-10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance )*.5 +
(d-x);
},
easeOut_elastic : function(t,d,obj,k){
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if (t==1) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
return (elasticity*Math.pow(2,-10*t) * Math.sin( (t-x)*(2*Math.PI)/resistance )+ d);
},
easeIn_elastic : function(t,d,obj,k){
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if (t==1) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
return -(elasticity*Math.pow(2,10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance ));
},
easeOut_bounce : function(t,d,obj){
if(t < (1/2.75))
return d*(7.5625*t*t) ;
else if (t < (2/2.75))
return d*(7.5625*(t-=(1.5/2.75))*t + .75) ;
else if (t < (2.5/2.75))
return d*(7.5625*(t-=(2.25/2.75))*t + .9375);
else
return d*(7.5625*(t-=(2.625/2.75))*t + .984375) ;
},
easeIn_bounce : function(t,d,obj,k){
return d - this.easeOut_bounce(1-t,d,obj) ;
},
easeInOut_bounce : function(t,d,obj){
if (t < 0.5) return this.easeIn_bounce(t*2, d,obj) * .5
else return this.easeOut_bounce(t*2-1, d,obj) * .5 + d*.5 ;
},
easeIn_back : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back;
return d*Math.pow(t,acc)*((back+1)*t - back);
},
easeOut_back : function (t,d,obj,k) {
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back;
return d*(Math.pow(t-=1,Math.ceil(acc/2)*2 )*((back+1)*t + back) + 1);
},
easeInOut_back : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back;
if ((t*=2) < 1) return d/2*(Math.pow(t,acc)*(((back*=(1.525))+1)*t - back));
return d/2*(Math.pow(t-=2,Math.ceil(acc/2)*2)*(((back*=(1.525))+1)*t + back) + 2);
}
}
};
Dynamic.Animation.prototype.Piste.Position=$class(Dynamic.Animation.prototype.Piste.Position,Dy
namic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Color=$class(Dynamic.Animation.prototype.Piste.Color,Dynamic.
Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.ModelBox=$class(Dynamic.Animation.prototype.Piste.ModelBox
,Dynamic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Opacity=$class(Dynamic.Animation.prototype.Piste.Opacity,Dyn
amic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Scale=$class(Dynamic.Animation.prototype.Piste.Scale,Dynamic.
Animation.prototype.Piste);
--------------------------------------------------------------------------------------------------------------function List(list,animOpen,animOver){
animOpen.define.onStart=function(){
if(!this.inverse)
this.elements[0].parentNode.style.visibility="visible";
}
animOpen.define.onFinish=function(){
if(this.inverse){
this.elements[0].parentNode.style.visibility="hidden";
}
}
var l=$(list).childNodes;
for (var n=0,length=l.length; n<length; n++ ){
if(Object.isElement(l[n])){
(function(li){
var ul=li.getElementsByTagName('UL')[0];
li.animOverLI=animOver.addPlayer(li);
if(ul){
for(var i=0,_li=[],length=ul.childNodes.length;i<length;i++){
if(Object.isElement(ul.childNodes[i])){
_li.push(ul.childNodes[i]);
arguments.callee(ul.childNodes[i])
}
}
li.animOpenLI=animOpen.addPlayer(_li);
}
Event.observe(li,'mouseover',function(e){
if(!this.isOver){
this.isOver=true;
this.animOverLI.play();
if(this.animOpenLI){
this.animOpenLI.play();
}
}
}.bindAsEventListener(li))
Event.observe(li,'mouseout',function(e){
var target=Event.relatedTarget(e);
if(!Element.childOf(target,this) && target!=this && this.isOver){
this.isOver=false;
this.animOverLI.playInverse();
if(this.animOpenLI){
this.animOpenLI.playInverse();
}
}
}.bindAsEventListener(li));
})(l[n])
}
}
}
-------------------------------------------------------------------------------------/*
*
* clone de prototype plus leger et plus rapide + kernel
*
*/
var $abstract=function(_class,superclass){//fonction ki initialise une classe abstraite
var Klass;
_class.subclasses = [];//tableau des sous classe
if(superclass){//voire definition des méthode
_class.addMethod=Kernel.addMethod;
Kernel.initializeClass(_class,superclass);
Klass=Kernel.extend(superclass.prototype || superclass,_class);
Kernel.addMethods(_class,Klass);
Klass.$super=Kernel.$super;
}
return Klass || _class;
}
var $class=function(_class,superclass){//fonction ki initialise une classe
var Klass,i;
Klass=function(){
return this.constructor.apply(this,arguments);//on retourne le constructeur
}
Klass.subclasses = [];//creer un tableau en static , pour les classe futur, ki hériteront d'elle
if(superclass){
Kernel.initializeClass(Klass,superclass);
Klass.prototype=Kernel.clone(superclass.prototype || superclass);
Kernel.addMethods(_class,Klass);
Klass.prototype.$super=Kernel.$super;
}else
Klass.prototype=_class;
if(_class.$static)//recopie les propriété static si définit
for(i in _class.$static)
Klass[i]=_class.$static[i];
Klass.prototype.$static=Klass;
return Klass;
};
$get=function(obj,properties,result){
var properties=properties.split(',');
var length=properties.length;
var polyProperties=new Array(length);
var result=result || {};
for(var i=0,length=properties.length;i<length;i++){
if(/^poly_/.test(properties[i])){
properties[i]=properties[i].replace(/^poly_/,'');
polyProperties[i]=true;
}
}
var get={
properties:properties,
polyProperties:polyProperties,
length:length,
remainToFind:length,
alreadyFinded:{}
};
if(obj instanceof Array){
for(var i=0,length=obj.length;i<length;i++)
Kernel.get(obj[i],result,get);
}else Kernel.get(obj,result,get);
if(properties.length-1)
return result;
else return result[properties[0]];
}
$call=function(obj,property){
var func=$get(obj,property);//on retrouve la fonction avec un $get
var args=Array.prototype.slice.call(arguments,2);//on enregistre les arguments a lui passer
if(func){// si func n est pas null
if(/^poly_/.test(property) && func.length){//si c est une appliquation multiple
for(var i=0,toReturn=[],length=func.length;i<length;i++)//pour chaque element de func , test si c
est une fonction et applique la avec les arguments, et en rengistrant son retour
if(typeof func[i]=='function')
toReturn[i]=func[i].apply(obj,args);
return toReturn;//retourn le tableau de resultat
}else if(typeof func=='function') //sinon , si func est une fonction retourner son application avec
les arguments
return func.apply(obj,args);
}
}
$extend=function(obj,toExtends,notInitializeExtends){
if(!notInitializeExtends)
toExtends=Kernel.initializeExtends(obj,toExtends) || toExtends;
if(!obj.$extends){
obj.$extends=toExtends;
}else obj.$extends=obj.$extends.concat(toExtends);
return obj;
}
$each=function(obj,iterator,context,polyEach){
var cumulProperty=polyEach?false:{};
if(obj instanceof Array){
for(var i=0,length=obj.length;i<length;i++){
if(typeof obj[i]=='object')
Kernel.each(obj[i],iterator,context,cumulProperty)
}
}else if(typeof obj=='object')
Kernel.each(obj,iterator,context,cumulProperty);
}
Kernel={
version :'0.9',
clone : function(source){//clone un objet en passant par le prototype, comme ca si j amais on
modifie la source alors le clone aussi, la réciproque n'étant pas vrai
var temp=function(){};
temp.prototype=source;
return new temp();
},
extend : function(source,destination){//étend un objet en clonant la source et rajouté les propriété
sur l objet cloné
var toReturn,i;
toReturn=Kernel.clone(source);
for(i in destination)
toReturn[i]=destination[i];
return toReturn;
},
/*------------------------------------------DEFINITION DES FONCTIONS PRIVEE-------------------------------------------------------*/
addMethod : function(property,value){//ajoute en propriété de l'objet de type fonction , le nom de
la fonction dans l'objet + la réference de la super class dont hérite la méthode
if(typeof value=='function' && this.superclass){
value.superclass=this.superclass.prototype || this.superclass;
value.property=property;
}
(this.prototype || this)[property] = value;
return this;
},
addMethods : function(source,destination){//boucle ki ajoute les méthode,pour toute les propriété
de l'objet non étendue (sans celle hérité)
for(var i in source)//ajoute les méthode de la classe
if(i!='$static' && i!='constructor')
destination.addMethod(i,source[i]);
if(source.constructor !== Object.prototype.constructor)
destination.addMethod('constructor',source.constructor);
},
$super : function(){//fonction permettant d'appeller la superclass de la fonction, 1er agument la
string de la prorpiété,2eme tableau a passé en argument via apply !! si la tring de la propriété a
recherché n 'est pas définit, alors elle sera automatiquement atribué du meme nom que celle ki
l'appele , différent du java, ki si on lui passe rien appelle le constructeur.... pour moi plus logique , a
voire
var args,superclass,get,caller,id;
caller=arguments.callee.caller;//récupere la fonction ki a appellé le super
if(typeof arguments[0]=='string'){
id=arguments[0];
args=arguments[1];
}else{
id=caller.property;
args=arguments[0];
}
get=caller.superclass[id];
if(typeof get=='function')
return get.apply(this,args || []);
return get;
},
initializeClass : function(Klass,superclass){//ajoute la méthode d'ajout de methode + definit
superclass et ajoute une la class dans le tableau de sa superclass, ki récapitulise toute les sousclasses
Klass.addMethod=Kernel.addMethod;
Klass.superclass = superclass;
superclass.subclasses=[Klass];
},
each : function(obj,iterator,context,cumulProperty){
for(var i in obj){
if(i!=='$extends'){
if(!cumulProperty || !cumulProperty[i]){
iterator.call(context || null,obj[i],i);
if(cumulProperty)
cumulProperty[i]=true;
}
}else
for(var j=0,length=obj[i].length;j<length;j++)
Kernel.each(obj[i][j],iterator,context,cumulProperty);
}
},
initializeExtends : function(obj,toExtends){
for(var i=0,length=toExtends.length;i<length;i++){
if(toExtends[i]==obj){
var haveRecurseRef = true;
toExtends[i]=false;
}else if(toExtends[i].$extends)
toExtends[i].$extends=Kernel.initializeExtends(obj,toExtends[i].$extends) ||
toExtends[i].$extends;
}
if(haveRecurseRef){
for(var i=0,toReturn=[],length=toExtends.length;i<length;i++){
if(toExtends[i])
toReturn.push(toExtends[i]);
}
return toReturn;
}
},
set : function(result,property,get,_get,i,poly){
if(get.polyProperties[i]){
if(!result[property]){
result[property]=[_get];
}else result[property].push(_get);
}else result[property]=_get;
if(!poly){
get.alreadyFinded[property]=true;
get.remainToFind--;
if(!get.remainToFind)return true;
}
},
get : function(obj,result,get){
getLoop : for(var i=0;i<get.length;i++){
var property=get.properties[i];
if(!get.alreadyFinded[property]){
var _get=obj[property];
if(_get!==undefined)
if(Kernel.set(result,property,get,_get,i))
return true;
if(get.polyProperties[i]){
var _get=obj['poly_'+property];
if(_get!==undefined)
if(Kernel.set(result,property,get,_get,i,true))
return true;
}
}
}
if(obj.$extends){
for(var i=0,lengthE=obj.$extends.length;i<lengthE;i++)
if(Kernel.get(obj.$extends[i],result,get))
return true;
}
}
};
/*
*------Selection--------------------------------------------------*/
function $(id) {
return (typeof(id) == "string") ? document.getElementById(id) : id;
}
/*
*------Object--------------------------------------------------*/
Object.extend = function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};
Object.extend(Object, {
clone: function(object) {
return Object.extend({ }, object);
},
isElement: function(object) {
return object && object.nodeType == 1;
}
});
/*
*------Fonction--------------------------------------------------*/
Object.extend(Function.prototype, {
bind : function() {
var __method = this, args = Array.prototype.slice.call(arguments,0), object = args.shift();
return function() {
return __method.apply(object, args.concat(Array.prototype.slice.call(arguments,0)));
}
},
bindAsEventListener : function() {
var __method = this, args = Array.prototype.slice.call(arguments,0), object = args.shift();
return function(event) {
return __method.apply(object, [( event ||
window.event)].concat(args).concat(Array.prototype.slice.call(arguments,0)));
}
}
});
/*
*-----Array---------------------------------------------------------*/
Object.extend(Array.prototype,{
include: function(value) {
for(var i=0;i<this.length;i++)
if(this[i]===value)
return true;
return -1;
}
});
// merci a ralecul pour son implementation plus rapide de l objet Event
var Event = {
observe : function() {
if(window.addEventListener){
return function(element, eventName, handler) {
$(element).addEventListener(eventName, handler, false);
};
}else if(window.attachEvent){
return function(element, eventName, handler) {
$(element).attachEvent("on"+eventName, handler);
};
}else{
return function(element, eventName, handler) {};
}
}(),
stopObserving : function() {
if(window.removeEventListener){
return function(element, eventName, handler) {
$(element).removeEventListener(eventName, handler, false);
};
}else if(window.detachEvent){
return function(element, eventName, handler) {
$(element).detachEvent("on"+eventName, handler);
};
}else{
return function(element, eventName, handler) {};
}
}(),
stop: function(event) {
if(window.attachEvent){
return function(event){
event.returnValue = false;
event.cancelBubble = true;
};
}else{
return function(event) {
event.preventDefault();
event.stopPropagation();
};
}
}(),
element: (function(event) {
if(window.addEventListener){
return function(event){
return event.target;
}
}else return function(event){
return event.srcElement;
}
})(),
relatedTarget:(function(event) {
if(window.addEventListener){
return function(event){
return event.relatedTarget;
}
}else return function(event){
var element;
switch(event.type) {
case 'mouseover': element = event.fromElement; break;
case 'mouseout': element = event.toElement; break;
default: return null;
}
return element;
}
})()
};
var Element = new Object();
Object.extend(Element, {
getStyle: function(element, rule) {
if(rule == 'float')
rule ='cssFloat';
element = $(element);
var value = element.style[rule];
if (!value){
if(document.defaultView && document.defaultView.getComputedStyle){
if(rule=='borderColor' || rule=='border-color'){
rule='border-left-color';
}else rule = rule.replace(/[A-Z]/g, function (strMatch, p1){return "-"+strMatch.toLowerCase();});
value = document.defaultView.getComputedStyle(element,
"").getPropertyValue(rule);
}else if(element.currentStyle) {
rule = rule.replace(/\-(\w)/g, function (strMatch, p1){return p1.toUpperCase();});
value = element.currentStyle[rule] ;
}
}
if (rule == 'opacity') return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
},
offset : function(element,type){
element = $(element);
var value = 0,offset=type=='left'?'offsetLeft':'offsetTop';
do {
value += element[offset] || 0;
element = element.offsetParent;
} while (element);
return value;
},
offsets : function(element){
element = $(element);
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
},
positionedOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
if (element) {
if (element.tagName == 'BODY') break;
var p = Element.getStyle(element, 'position');
if (p == 'relative' || p == 'absolute') break;
}
} while (element);
return [valueL, valueT];
},
absolutize: function(element) {
element = $(element);
if (Element.getStyle(element,'position')== 'absolute') return;
// Position.prepare(); // To be done manually by Scripty when it needs it.
var offsets = Element.positionedOffset(element);
var top = offsets[1];
var left = offsets[0];
var width = element.clientWidth;
var height = element.clientHeight;
element._originalLeft = left - parseFloat(element.style.left || 0);
element._originalTop = top - parseFloat(element.style.top || 0);
element._originalWidth = element.style.width;
element._originalHeight = element.style.height;
element.style.position = 'absolute';
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.width = width + 'px';
element.style.height = height + 'px';
return element;
},
getDimensions: function(element) {
element = $(element);
var display = Element.getStyle(element,'display');
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
},
childOf: function(element, ancestor) {
element = $(element), ancestor = $(ancestor);
while (element = element.parentNode)
if (element == ancestor) return true;
return false;
}
});
Pages: 1 2
