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> |
Partager