Table des matières
Niveau
..........
En rapport...

Faire un effet scroll en javascript

Voici une fon

ction qui vous permettra de faire défiler un element dans un autre.

Le code javascript

javascript
currentPos=0;
var timer="";
function moveElement(myElement,maxMove,speed) {
	//on incremente la position courante
	currentPos+=speed;
	//on recupere la valeur de la position actuelle de l'element
	var currentMargin=parseInt((myElement.style.marginLeft)?myElement.style.marginLeft.substr(0,myElement.style.marginLeft.length-2):"0");
 
	//si currentPos n'a pas atteint le maxMove on deplace l'element
	if(Math.abs(currentPos)<maxMove) {
		currentMargin+=speed;	
		myElement.style.marginLeft=currentMargin+"px";
	}
	//sinon on arrete l'interval et positionne l'element (en faisant attention de ne pas depasser)
	else {
		currentMargin+=(Math.abs(speed)-(Math.abs(currentPos)-maxMove))*(speed/Math.abs(speed));
		myElement.style.marginLeft=currentMargin+"px";
		//on remet currentPos à 0
		currentPos=0;
		clearInterval(timer);
		timer="";
		//on verifie si les boutons next et back doivent toujours etre affiche.
		document.getElementById('nextBtn').style.display=(currentMargin>=0)?"none":"";
		document.getElementById('backBtn').style.display=(Math.abs(currentMargin)>=myElement.offsetWidth-maxMove)?"none":"";
	}
}
function launchMoveElement(myElement,maxMove,speed) {
	if(timer=="") {//permet de ne pas relancer le timer s'il n'est pas termine
		timer=setInterval("moveElement(document.getElementById('" + myElement.id + "')," + maxMove + ", " + speed + ")",50);
	}
}

Le code html

html4strict
<div style="width:500px; border:1px solid #000; overflow:hidden; height:20px;">
  <div id="allImg" style="width:1250px; height:20px;">
Le contenu à faire défiler ici
  </div>
</div>
<a href="#" style="display:none;" id="nextBtn" onclick="launchMoveElement(document.getElementById('allImg'),760,60);">Next</a>
<a href="#" id="backBtn" onclick="launchMoveElement(document.getElementById('allImg'),760,-60);">Back</a>

Principe

Les liens next et back appel au click la fonction launchMoveElement
Cette fonction vérifie si un mouvement est déja en cours si non elle créée un “timer” qui lancera la fonction moveElement toute les 50 ms.
La fonction moveElement, modifiera alors le margin-left de l'élément donné de “speed” px à chaque passage jusqu'a ce que le nombre de px donné par “maxMove” soit atteint.

Exemple

scroll_js.html


07/02/2008 14:21 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.