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
147
148
149
150
151
152
153
154
155
156
157
158
159
| <html>
<head>
<title>...</title>
<style type="text/css">
body {margin:0px}
img {display:none;position:absolute}
// propriétés de la boîte à images;"position" et "overflow" sont nécessaires;
#c {display:none;margin-top:100px;background-color:#ffcc00;position:relative;overflow:hidden;}
</style>
</head>
<body>
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>
<div style="margin-top:50px;margin-left:50px">
<strong>
En passant sur la boîte à images, on décide du sens et de la vitesse de défilement;<br />
En cliquant sur la zone, on stoppe le défilement et on active les liens images;<br/>
On peut alors afficher chaque image dans une fenêtre indépendante (pas d'agrandissement ici,
ce n'est pas le but);<br />
Si on reclique dans la zone, on relance le défilement;
</strong>
</div>
<script type="text/javascript">
//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;
//||||||||||||||||||||||||
//Variables paramétrables|
//||||||||||||||||||||||||
var M=100;// marge de gauche de la boîte à images;
var W=300;// largeur de la boîte à images
// (forcément supérieure à la somme des largeurs des images);
var H=100;// hauteur de la boîte à images;
var delai=Math.round(W/4);// le délai initial est d'un quart
// de la largeur de la boîte;
//|||||||||||||||||||||
//Création de la boîte|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";
var dec=M+W/2;// position horizontale au centre de la boîte;
//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
zero= i<9 ? 0 : "";
tab[i]=new Image();
tab[i].src="http:/ /javatwist.imingo.net/sm"+zero+(i+1)+".gif";
c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));
//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
lf=parseInt(tab[i].style.left);
w=tab[i].width;
tab[i].style.left=lf+val+"px";
if(lf>pos-w){
tab[i].style.left=lf-pos+"px"};
if(lf<W-pos){
tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}
//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;
if(el>=dec){
delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
delai=W/2-1-(dec-el);val=-2};// val=déplacement
}
//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
if(oui){clearTimeout(timer);oui=false;
for(i in tab){
tab[i].style.cursor="pointer"};
}
else{go();oui=true;
for(i in tab){
tab[i].style.cursor="default"};
};
}
//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
for(i in tab){
tab[i].onclick=function(){
if(this.style.cursor=="pointer"){
window.open(this.src)}
};
}
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}
</script>
</body>
</html> |
Défilement d'une image
Envoyé par blueice
Répondre avec citation
Partager