Faire un effet scroll en javascript

Voici une fon

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

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);
	}
}

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

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.

scroll_js.html

07/02/2008 14:21 -