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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test images defilantes </title>
<style type="text/css">
.cexpand{display:block;width:100px;height:100px;background-color:#D1D8D8;}
#newsbox { width: 110px; height: 300px; border: 1px solid #000000; position: relative; overflow: hidden;background-color:#000000;}
#newslist { position: absolute;padding: 0 5px 0; }
</style>
<script language="javascript" type="text/javascript">
var pos;
var MNU_WAY = 0; //direction du menu: 0 on bouge pas 1 on descend -1 on monte
var MNU_SPEED = 2; // vitesse de defilement
var TIMER;
var SPEED=10;
function getElements(tag,attr,reg){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
if(!(reg instanceof RegExp)){
if(reg.indexOf("*")>-1){
reg=reg.replace(/\*/g,'.+');
reg=new RegExp(reg);
}else { return tabReg; }
}
i=0;
while(tabElts[i]){
if(tabElts[i][attr]){
if(reg.test(tabElts[i][attr])){
tabReg.push(tabElts[i]);}
}
reg.test("");
i++;
}
return tabReg;
}
//On ajoute l event en fonction du Browser (IE ou FF)
function addEvent(Obj,evt,fonction){
if(Obj.addEventListener){
Obj.addEventListener(evt,fonction,false);
}else if(Obj.attachEvent) {
Obj.attachEvent('on'+evt,fonction);
}
}
// modif de la taille du div contenant l image
function expandBox(){
var t= document.getElementById("IdmBox");
var img = document.getElementById("Idimg");
if(t) {
if(parseInt(t.style.width)>400){clearInterval(TIMER);return false;}
var step = 5;
var cwidth = parseInt(t.style.width);
var cheight = parseInt(t.style.height);
if(cheight<=0){cheight=1;}
if(cwidth<=0){cwidth=1;}
var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
var pheight = parseInt((screen.availHeight/3)-(cheight/2));
t.style.left = pwidth+'px';
t.style.top = pheight+'px';
t.style.width = cwidth+step+'px';
t.style.height = cheight+step+'px';
t.style.border="solid";
t.style.borderWidth="5px";
t.style.borderColor="#000000";
t.style.backgroundColor="#FFFFFF";
img.style.width= cwidth+step+'px';
img.style.height = cheight+step+'px';
}
}
//creation du div centre contenant l image agrandie
function callBox(){ // creation du Box image
var img = this.src.substring(this.src.lastIndexOf('/')); // recup du nom de l image
var imgSrc = './img/'+img; // a adapter suivant le rep de stockage
if(document.getElementById("IdmBox")){ // test si la box d affichage existe deja
if(TIMER){clearInterval(TIMER);} //arret du timer
document.body.removeChild(document.getElementById("IdmBox")); // suppression de la box
}
var mBox = document.createElement('div'); //creation du div de la box
mBox.id = "IdmBox"; // id de la box
var cwidth = this.style.width;
var cheight = this.style.height;
if(cheight<=0){cheight=1;}
if(cwidth<=0){cwidth=1;}
var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
var pheight = parseInt((screen.availHeight/3)-(cheight/2));
mBox.style.position="absolute";
mBox.style.left = pwidth+'px';
mBox.style.top = pheight+'px';
mBox.style.width = cwidth+'px';
mBox.style.height = cheight+'px';
mBox.style.border="solid";
mBox.style.borderWidth="5px";
mBox.style.borderColor="#000000";
var imgBox = document.createElement('img'); //creation element image
imgBox.id = "Idimg";
imgBox.src = imgSrc;
imgBox.style.width= cwidth+"px";
imgBox.style.height = cheight+"px";
addEvent(mBox,'click',closeBox);
mBox.appendChild(imgBox); //ajout de element image a la Box
document.body.appendChild(mBox); //ajout del la box dans la page
TIMER=setInterval("expandBox()", SPEED); //appel de la fonction expand
}
function closeBox(){
TIMER=setInterval("reduceBox()", SPEED);
}
function reduceBox(){
var t= document.getElementById("IdmBox");
var img = document.getElementById("Idimg");
if(t) {
var step = 10;
var cwidth = parseInt(t.style.width);
var cheight = parseInt(t.style.height);
if(cheight<=10 || cwidth<=10){
clearInterval(TIMER);
document.body.removeChild(document.getElementById("IdmBox"));
return false;
}
if(cwidth<=0){cwidth=1;}
var pwidth = parseInt((screen.availWidth/2)-(cwidth/2));
var pheight = parseInt((screen.availHeight/3)-(cheight/2));
t.style.left = pwidth+'px';
t.style.top = pheight+'px';
t.style.width = cwidth-step+'px';
t.style.height = cheight-step+'px';
t.style.border="solid";
t.style.borderWidth="5px";
t.style.borderColor="#000000";
img.style.width= cwidth+step+'px';
img.style.height = cheight+step+'px';
}
}
function startAnim() {
var t = document.getElementById('newslist'); //get du div newslist
var InitialListHeight = t.clientHeight; // height de la zone images avant modif
var zoneHeight = document.getElementById('newsbox').clientHeight; // hauteur de la zone d affichage de la liste d images
pos = t.offsetTop;; // position courante = position initiale
var tabImg = getElements('img','className',/cexpand/); // recup des images de class cexpand dans un tableau
if(tabImg.length==0){ return false;} else {var NbImg = tabImg.length;} // si pas d image trouvee on arret tout
var ImgHeight = tabImg[0].height; // on recupere la valeur height de l image (utile pour le calcul du rool-over)
var ImgView = zoneHeight/ImgHeight; //nombre d images visibles simultanément. (zone d affichage)
for(var a=NbImg-ImgView;a<=NbImg-1;a++){ // parcour du tableau d images depuis la fin111
t.insertBefore(tabImg[a].cloneNode(true),tabImg[0]);
}
pos = Math.floor(pos-(ImgHeight*ImgView)); //calcul de la nouvelle position de la liste pour afficher la premiere image user
t.style.top = pos + 'px'; //repositionnement de la liste à sa position initial
tabImg = getElements('img','className',/cexpand/);
for(a=0;a<tabImg.length-1;a++){addEvent(tabImg[a],'click',callBox);}
tabImg = undefined; //suppression du tableau (ne sert plus a rien)
setInterval(function(){anim(ImgHeight, zoneHeight,InitialListHeight);}, MNU_SPEED); // appel de la fonction d animation a interval regulier (MUN_SPEED)
}
function anim(ImgHeight, zoneHeight, InitialListHeight) { //fonction du defilement PARM: @position debut,@hauteur 1 image,@taille de la zone d affichage
var e = document.getElementById('newslist');
pos = pos - MNU_WAY;
if(pos===0){ pos = pos -InitialListHeight+1; } //tete de liste des images.
if(pos===-InitialListHeight){ pos = pos +InitialListHeight; }
e.style.top = Math.floor(pos) + 'px';
}
window.onload = function() { //attribution des evenements sourie
var e = document.getElementById('newsbox'); // recup du div newsbox
e.onmouseover = function(event) { //event mouseover
if(window.event){m=window.event;}else{m=event;} //gestion event en fonction du browser
if(m.clientY >e.offsetHeight/2){MNU_WAY = 1;}else{ MNU_WAY = -1;} // direction de defilement
};
e.onmouseout = e.onclick = function() { MNU_WAY = 0;}; //arret du defilement sur click ou sourie hors du div
setTimeout(function(){startAnim();},500); //pour atendre le chargement des tag img de la page
};
</script>
</head>
<body style="background-color:#002D47;">
<div id='newsbox'>
<div id='newslist' >
<img src="./img/04.jpg" class="cexpand"/>
<img src="./img/66.gif" class="cexpand"/>
<img src="./img/geekscottes_121.png" class="cexpand"/>
<img src="./img/05.jpg" class="cexpand"/>
<img src="./img/A06.jpg" class="cexpand"/>
<img src="./img/A07.jpg" class="cexpand"/>
<img src="./img/A08.jpg" class="cexpand"/>
</div>
</div>
</body>
</html> |
