// Permet facilement de faire bouger des images et des elements HTML // BougeAdd(strDivBouge) permet d'agouter une balise

// exemple : // c.f. DivCenter_V2.html comme exemple // c.f. indexOlivier11.html comme gros exemple. var nBougeTimerID = 0; // identification du timer var ctenMaxBouge = 50; // nombre max de 'div..' stockables pour bouger var astrBouge = new Array(50); // permet de stocker une liste 'div' de 50 images var nNbBouge = 0; // indique le nombre d'images stockee var anBougeX0 = new Array(50); // Position d'attraction du 'div...' var anBougeY0 = new Array(50); var anBougeXr = new Array(50); // Position reelle du 'div...' relative a la position d'attraction var anBougeYr = new Array(50); var anBougeDirX = new Array(50); // direction de deplacement var anBougeDirY = new Array(50); var afBougeIt = new Array(50); // oui ou non faut-il bouger le 'div...' correcpondant ? var anBougeChoix = new Array(50); // la valeur determine la maniere de bouger var cteBougeAleatoire = 1; // constante indiquant de bouger aleatoirement var cteBougeXY4Cote = 2; // constante indiquant de bouger en suivant 4 diagonales var anBougeXmin = new Array(50); // position relatives extremales pour bouger les 'div...' var anBougeXmax = new Array(50); var anBougeYmin = new Array(50); var anBougeYmax = new Array(50); var anBougeXrand = new Array(50); // inverse de la contrainte de retour a la position d'attraction. var anBougeYrand = new Array(50); var nDivCenterWidth = 0; // largeur actuelle de la fenetre; var nDivCenterWidthMin = 400; // sous cette valeur, on ne change pas les positions des 'div...' function BougeLocal1() { //====================== // fait Bouger les champs 'div...' de la liste astrBouge[...] var nn = 0; var nDX = 1; // direction de deplacement, changera au hasard. var nDY = 1; var nDiffX = 0; // decalage en X entre la position reelle et la position d'attraction var nDiffY = 0; // decalage en Y entre la position reelle et la position d'attraction var oDivBouge; // pour l'info sur le 'div...' for (nn = 1; nn <= nNbBouge; nn++) if (afBougeIt[nn] != 0) { if (anBougeChoix[nn] == cteBougeAleatoire) { nDiffX = anBougeXr[nn]; // decalage en X entre la position reelle et la position d'attraction nDiffY = anBougeYr[nn]; // decalage en Y entre la position reelle et la position d'attraction // bouge aleatoirement, mais en etant attire par la position d'attraction if ((((2*anBougeXrand[nn] + Math.abs(nDiffX)) * Math.random() -anBougeXrand[nn]) * (nDiffX + 0.1)) < 0) nDX = 1; else nDX = -1; if ((((2*anBougeYrand[nn] + Math.abs(nDiffY)) * Math.random() -anBougeYrand[nn]) * (nDiffY + 0.1)) < 0) nDY = 1; else nDY = -1; // Deplace les positions de references selon les valeurs de nDX et nDY anBougeXr[nn] = anBougeXr[nn] + nDX; anBougeYr[nn] = anBougeYr[nn] + nDY; } // if (anBougeChoix[nn] == cteBougeAleatoire) if (anBougeChoix[nn] == cteBougeXY4Cote) { // se deplace regulierement de Xmin a Xmax et de Ymin a Ymax // Deplace les positions de references selon les valeurs de anBougeDirX[nn] et anBougeDirY[nn] if (anBougeXr[nn] <= anBougeXmin[nn]) anBougeDirX[nn] = 1; if (anBougeXr[nn] >= anBougeXmax[nn]) anBougeDirX[nn] = -1; if (anBougeYr[nn] <= anBougeYmin[nn]) anBougeDirY[nn] = 1; if (anBougeYr[nn] >= anBougeYmax[nn]) anBougeDirY[nn] = -1; anBougeXr[nn] = anBougeXr[nn] + anBougeDirX[nn]; anBougeYr[nn] = anBougeYr[nn] + anBougeDirY[nn]; } // if (anBougeChoix[nn] == cteBougeXY4Cote) // Deplace le 'div...', mais contole avant qu'ils ne sortent pas des limites imposees if (anBougeXr[nn] < anBougeXmin[nn]) anBougeXr[nn] = anBougeXmin[nn]; if (anBougeXr[nn] > anBougeXmax[nn]) anBougeXr[nn] = anBougeXmax[nn]; if (anBougeYr[nn] < anBougeYmin[nn]) anBougeYr[nn] = anBougeYmin[nn]; if (anBougeYr[nn] > anBougeYmax[nn]) anBougeYr[nn] = anBougeYmax[nn]; oDivBouge = document.getElementById(astrBouge[nn]); oDivBouge.style.left = anBougeX0[nn] + anBougeXr[nn] + 'px'; oDivBouge.style.top = anBougeY0[nn] + anBougeYr[nn] + 'px'; } // for nn = 1; ... } // BougeLocal1 function BougeAdd(strDivBouge) { //============================== // Ajoute une image a la liste var oDivBouge; // pour l'info sur le 'div...' if (nNbBouge <= ctenMaxBouge) { oDivBouge = document.getElementById(strDivBouge); // test si le 'div...' existe if (oDivBouge == null) { alert(strDivBouge + " n'existe pas !") return; } nNbBouge = nNbBouge + 1; astrBouge[nNbBouge] = strDivBouge; // memorise la reference au 'div...' afBougeIt[nNbBouge] = 0; // par defaut, le 'div...' ne bouge pas // memorise la position actuelle du 'div...'' anBougeX0[nNbBouge] = parseInt(oDivBouge.style.left); anBougeY0[nNbBouge] = parseInt(oDivBouge.style.top); anBougeXr[nNbBouge] = 0; anBougeYr[nNbBouge] = 0; // parametres par defaut anBougeChoix[nNbBouge] = cteBougeAleatoire; // constante indiquant de bouger aleatoirement anBougeXmin[nNbBouge] = -100; anBougeXmax[nNbBouge] = 100; anBougeYmin[nNbBouge] = -100; anBougeYmax[nNbBouge] = 100; anBougeXrand[nNbBouge] = 10; anBougeYrand[nNbBouge] = 10; anBougeDirX[nNbBouge] = 1; // direction de deplacement anBougeDirY[nNbBouge] = 1; } else { alert("trop d'images à traiter, seule " + ctenMaxBouge + " sont prises en compte."); } } // BougeAdd function BougeSetChoix(nChoix) { //============================== // Choix de la maniere de faire bouger les 'div...'' // du dernier 'div...' ajoute // Pour les choix, c.f. cteBougeAleatoire ; cteBougeXY4Cote etc. if (nNbBouge > 0) { anBougeChoix[nNbBouge] = nChoix; } } // BougeSetChoix function BougeSetXMinMax(nXMin, nXMax) { //====================================== // Defini des limites relatives minimale et maximale de deplacement horizontal // du dernier 'div...' ajoute if (nNbBouge > 0) { anBougeXmin[nNbBouge] = nXMin; anBougeXmax[nNbBouge] = nXMax; } } // BougeSetXMinMax function BougeSetYMinMax(nYMin, nYMax) { //====================================== // Defini des limites relatives minimale et maximale de deplacement vertical // du dernier 'div...' ajoute if (nNbBouge > 0) { anBougeYmin[nNbBouge] = nYMin; anBougeYmax[nNbBouge] = nYMax; } } // BougeSetYMinMax function BougeSetXYRand(nXrand, nYrand) { //====================================== // inverse de la contrainte de retour a la position d'attraction. // Si la contrainte vaut 1, le 'div...' se deplacera tres peu // du dernier 'div...' ajoute if (nNbBouge > 0) { anBougeXrand[nNbBouge] = nXrand; anBougeYrand[nNbBouge] = nYrand; } } // BougeSetXYRand function BougeStop(divName, fReplace) { //===================================== // Si divName = 'all' ou = 'All' ou = 'ALL' // arrete le deplacement de tous les 'div...' // Arrete le bouger le 'div...' se trouvant dans divName // Si fReplace == 1, remet le 'div...' a sa position d'attration var nn = 0; var fStopTimer = 1; // indique s'il faut arreter le timer var oDivBouge; // pour l'info sur le 'div...' if ((divName == 'all') || (divName == 'All') || (divName == 'ALL')) { fStopTimer = 1; for (nn = 1; nn <= nNbBouge; nn++) { if ((fReplace != 0) && (afBougeIt[nn] != 0)) { // remet le 'div...' a sa place de reference oDivBouge = document.getElementById(astrBouge[nn]); oDivBouge.style.left = anBougeX0[nn] + 'px'; oDivBouge.style.top = anBougeY0[nn] + 'px'; } // if afBougeIt[nn] = 0; } // for } else { // cherche le 'div...' qui doit arreter de bouger for (nn = 1; nn <= nNbBouge; nn++) { if (divName == astrBouge[nn]) { if ((fReplace != 0) && (afBougeIt[nn] != 0)) { // remet le 'div...' a sa place de reference oDivBouge = document.getElementById(astrBouge[nn]); oDivBouge.style.left = anBougeX0[nn] + 'px'; oDivBouge.style.top = anBougeY0[nn] + 'px'; anBougeXr[nn] = 0; anBougeYr[nn] = 0; } // if afBougeIt[nn] = 0; } // if // si un 'div...' bouge encore, ne pas arreter le timer if (afBougeIt[nn] != 0) fStopTimer = 0; } // for nn = 1; ... } // if if ((fStopTimer != 0) && (nBougeTimerID != 0)) { clearInterval(nBougeTimerID); nBougeTimerID = 0; } } // BougeStop function BougeStart(divName) { //============================ // Si divName = 'all' ou = 'All' ou = 'ALL' // Deplace les 'div...' toutes les '100' milisecondes. // Permet de bouger le 'div...' se trouvant dans divName //alert (divName); // pour afficher un message var nn = 0; if ((divName == 'all') || (divName == 'All') || (divName == 'ALL')) { for (nn = 1; nn <= nNbBouge; nn++) afBougeIt[nn] = 1; } else { // permet au 'div...' de bouger for (nn = 1; nn <= nNbBouge; nn++) { if (divName == astrBouge[nn]) afBougeIt[nn] = 1; } // for nn = 1; ... } // if if (nBougeTimerID == 0) nBougeTimerID = setInterval("BougeLocal1()", 100); } // BougeStart function divCenterAll() { //======================= var nn = 0; var nWidth = 0; // largeur d'ecran' var nWidthDelta = 0; var strS = ''; var oDivImage; // info de debugging //var oDivInfo = document.getElementById("divInfo"); if (window.innerWidth) nWidth = window.innerWidth; // pour Firefox et Opera else if (document.body && document.body.clientWidth) nWidth = document.body.clientWidth; // IE. //if (nWidth < nDivCenterWidthMin) return; if (nWidth < nDivCenterWidthMin) nWidth = nDivCenterWidthMin; nWidthDelta = Math.round((nWidth - nDivCenterWidth)/2); for (nn = 0; nn < document.getElementsByTagName("DIV").length; nn++) { // strS = strS + document.getElementsByTagName("DIV").item(nn).id + ' '; // strS = strS + document.getElementsByTagName("DIV").item(nn).style.position + ' '; if (document.getElementsByTagName("DIV").item(nn).style.position != 'relative') { oDivImage = document.getElementsByTagName("DIV").item(nn); if (oDivImage.style.left) { oDivImage.style.left = parseInt(oDivImage.style.left) + nWidthDelta + 'px'; //oDivImage.style.top = parseInt(oDivImage.style.top) + 1 + 'px'; } } // if } // for for (nn = 1; nn <= nNbBouge; nn++) { anBougeX0[nn] += nWidthDelta; // anBougeY0[nn] += 1; } //oDivInfo.innerHTML = "info =" + oDivImage.style.left; // memorise la nouvelle largeur de fenetre nDivCenterWidth += 2 * nWidthDelta; //confirm('nb= ' + document.getElementsByTagName("DIV").length + ' list = ' + strS); } // divCenterAll function divCenterStart(nWidthSet, nWidthMin) { //============================================= // nWidthMin = largeur en-dessous de laquelle, on ne deplace pas les 'div...' // nWidthSet = largeur 'normale' de la fenetre // Si nWidthSet == 0, alors prend la largeur d'ecran if (nWidthSet != 0) { nDivCenterWidth = nWidthSet; } else { if (window.innerWidth) nDivCenterWidth = window.innerWidth; // pour Firefox et Opera else if (document.body && document.body.clientWidth) nDivCenterWidth = document.body.clientWidth; // IE. } nDivCenterWidthMin = nWidthMin; //confirm('nDivCenterWidth= ' + nDivCenterWidth); divCenterAll(); // place correctement les 'div...' au depart } // divCenterStart