1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
| x=1;///!\Laissez a 1 ////x correspond au numéro de page ou se trouve l'utilisateur.
xmax=7;/// ICI mettre le nombre de page de la note d'application!
xmin=1; ///!\Laissez a 1 //
//Cette fonction est utile dans le cadre de l'index des questions.
//Elle permet à l'utilisateur a ne pas avoir a cliquer 2 fois sur la question .
window.onload=function(){ // Lancement de la fonction au démarrage de la page
var lloc = location.hash; // Récupère l'ancre dans le lien ( #para1//#para2//#para3//ect) et l'inclu dans la variable h
for(i=xmin;i<=xmax;i++){ // Boucle For pour comparer ensuite la variable h avec les ancres disponible sur la page
if(lloc==("#para"+i)){ // Si la comparaison réussi ; i est récupérer pour l'utiliser dans la fonction gotodiv(i) ;
gotodiv(i); // Voir plus haut pour une explication de cette fonction
}
}
if(x==2){ //Le diaporama se situe page 2 ;)
lancediapo(); //fonction pour lancer le diaporama
}
}
//Fonction activant le diaporama page 2
function lancediapo(){
D3 = 1; //Gere l'opaciter de l'image correspondant a Screen2
D2 = 0; //Gere l'opaciter de l'image correspondant a Screen3
SW = 1; //Init machine d'etat
var NA9D3={//Objet div Screen3
'div': document.getElementById('Screen2'),//Relation avec la div
'opa': function(){
this.div.style.opacity = D3;//Fontion permettant de changer l'opacité de D3
}
}
var NA9D2={ //Objet div Screen2
'div': document.getElementById('Screen3'),//Relation avec la div
'opa': function(){
this.div.style.opacity = D2;//Fontion permettant de changer l'opacité de D2
}
}
NA9D2.opa();//Lancement de la premiere transition
NA9D3.opa();//Lancement de la premiere transition
var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];//Recuperatioon des events fin de transition
for(var a in navigatorsProperties)
{
NA9D2.div.addEventListener(navigatorsProperties[a],function(e){ //Mise en ecoute des events
SW= D3+D2;//Calcule machine d'état
switch(SW){
case 0:
D3=1;D2=0;
break;
case 1:
D3=1;D2=1;
break;
case 2:
D3=0;D2=0;
break;
}
NA9D2.opa();
NA9D3.opa();//Lancement de la transition
},false);
NA9D3.div.addEventListener(navigatorsProperties[a],function(e){ //Mise en ecoute des events
SW= D3+D2;//Calcule machine d'état
switch(SW){
case 0:
D3=1;D2=0;
break;
case 1:
D3=1;D2=1;
break;
case 2:
D3=0;D2=0;
break;
}
NA9D2.opa();//Lancement de la transition
NA9D3.opa();//Lancement de la transition
},false);
}
}
//Cette fonction permet de cacher tout les paragraphes et d'activer le paragraphe #para"a"; utile pour atteindre un para éloigner
function gotodiv(a){ //Cette fonction permet de cacher tout les paragraphes et d'activer le paragraphe #para"a"
if(a!=0){ //Dans le cas où a=0 cela permet de ne pas modifier x, c'est à dire permet de venir
x=a; //et retourner d'une page voc sans avoir a changer x.
}
for(i=xmin; i<=xmax ; i++){
document.getElementById("para"+i).style.display = "none"; //Cache les paragraphes non voulu.
}
document.getElementById("parav").style.display = "none"; //Cache le paragraphe de vocabulaire.
document.getElementById("parap").style.display = "block"; //Active la fleche gauche.
document.getElementById("paras").style.display = "block"; //Active la fleche droite.
if(x==xmax){ //Vérifie si la page est la derniere.
document.getElementById("paras").style.display = "none"; //Si nous sommes sur la derniere page,
} //la fleche de droite est cacher.
if(x==xmin){ // Vérifie si la page est la premiere
document.getElementById("parap").style.display = "none"; //Si nous sommes sur la premiere page,
} //La fleche gauche est cacher.
document.getElementById("para"+x).style.display = "block"; //Active le paragraphe souhaité
$('html,body').animate({scrollTop: 0}, 'slow'); //Remonte en haut de la page.
if(x==2){ //Le diaporama se situe page 2 ;)
lancediapo(); //fonction pour lancer le diaporama
}
}
Css :
#Screen1{
width: 640px;
height: 480px;
opacity : 1;
border-top: 1px solid #103057;
background: url('NA9D1.jpg');
}
#Screen2{
width: 640px;
height: 480px;
background:url('NA9D3.jpg');
opacity : 0;
-webkit-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
}
#Screen3{
width: 640px;
height: 480px;
background:url('NA9D2.jpg');
opacity : 0;
-webkit-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 10000ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
}
Html :
[.....]
<div id="para2" style="display:none;">
<div id="Screen1">
<div id="Screen2">
<div id="Screen3">
</div>
</div>
</div>
</div>
<div id="para3" style="display:none;">
[.....] |
Javascript+Css3 Incompatibilité Display//Machine d'etat pour Diaporama
Répondre avec citation
Partager