Scrolling

Répondre
Citer ce message
KiwiSlice
le 20/10/2005 à 21:02
KiwiSlice
Svp quelqu'un pourrais m'aider je trouve rien qui répond à mes besoins sur le net.

Je veut simplement faire un défilement de texte de haut en bas à l'aide d'un onmouseover sur 2 boutons ( up et down )

Exemple :

Bouton Up

Texte ici
Texte ici
Texte ici
Texte ici

Bouton Down

et je voudrais ne voir que 4 lignes à la fois comme dans mon exemple
KiwiSlice - The fruity taste of kiwi
Citer ce message
Bzh
le 20/10/2005 à 23:46
Bzh
Tu peux le faire en simple html avec css, sans javascript !!!!


entre <head> et </head>
<script language="javascript">

	

	var Timer;

	var Pas = 3;

	

	function moveLayer(Sens)

	{

		if(document.getElementById)

			Objet = document.getElementById("Contenu");

		else

			Objet = document.all["Contenu"];

		if(parseInt(Objet.style.top) + (3*Sens) > 0)

			Objet.style.top = "0px";

		else

			Objet.style.top = (parseInt(Objet.style.top) + (3*Sens)) + "px";

		Timer = setTimeout("moveLayer(" + Sens + ");", 50);

	}

</script>


entre &lt;body&gt; et &lt;/body&gt;
<div id="Support" style="position:relative;width:250;height:150px;overflow:hidden;border:1px solid #000000">

	<div id="Contenu" style="position:absolute;width:250;height:150px;left:0;top:0">

	

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	bla<br>

	

	</div>

</div>

<a href="" onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);">Haut</a>

<a href="" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);">Bas</a>


Bye...
Citer ce message
Meeper
le 29/10/2005 à 12:12
Meeper
salut j'ai testé ton script ca marche bien mais je me pose une question la variable "pas" elle sert a quoi ??
Citer ce message
LA GLOBULE
le 29/10/2005 à 13:37
LA GLOBULE
Tu peux le faire en simple html avec css, sans javascript !!!!


Premiere ligne du code source :

<script language="javascript">


...
Citer ce message
Bzh
le 30/10/2005 à 21:10
Bzh
Nan !!! Ce que je voulais dire c' est qu' il y a deux façons de le faire : javascript ou css (quoi que, maintenant que j' y réfléchie, ch' ui moin sur...) !!!! smiley Et puis vous aviez bien compris ce que je voulais dire...

Sinon, oui il y a une petite erreur => 
<script language="javascript">

    

    var Timer;

    var Pas = 3;

    

    function moveLayer(Sens)

    {

        if(document.getElementById)

            Objet = document.getElementById("Contenu");

        else

            Objet = document.all["Contenu"];

        if(parseInt(Objet.style.top) + (Pas*Sens) > 0)

            Objet.style.top = "0px";

        else

            Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";

        Timer = setTimeout("moveLayer(" + Sens + ");", 50);

    }

</script>



Voili, voilou... Ciao...
Citer ce message
Bzh
le 23/12/2005 à 20:59
Bzh
Heu !!! Pour le pas, c'est le nombre de pixel de déplacement à chaque incrémentation ! smiley Enfin, je me comprends...

Ciao...
Citer ce message
totototo
le 12/11/2006 à 16:26
totototo
salut,

merci bcp pour le script, c'est exactement ce qu'il me faut :)

Juste un petit detail que je trouve genant. Autant lorsque l'on appuye sur le bouton "haut" le scrolling s arrete bien a la premiere ligne, autant lorsque l'on appuye su le bouton "bas", le scrolling continue a l'infini et affiche du blanc apres le texte.

Y a t il un moyen de bloquer le scrolling a la derniere ligne du texte ?

merci d'avance pour vos reponses

S
Citer ce message
webandgie
le 27/02/2009 à 16:36
webandgie
Merci pour tout Bzh

Avec mon collgue, on a trouv un moyen d'arrter le dfilement du texte par la taille du contenu par rapport au contenant :

dans le 

<head><script language="javascript">

    

   var Timer;

    var Pas = 8;

   

   function moveLayer(Sens)

   {

		if(document.getElementById)

			Objet = document.getElementById("Contenu");

		else

			Objet = document.all["Contenu"];

		if(parseInt(Objet.style.top) + (Pas*Sens) > 0)

		{

			Objet.style.top = "0px";

		}

		else if(parseInt(Objet.style.top) + (Pas*Sens) < -428)

		{

			Objet.style.top = "-428px";

		}

		else

			Objet.style.top = (parseInt(Objet.style.top) + (Pas*Sens)) + "px";

		Timer = setTimeout("moveLayer(" + Sens + ");", 50);  

   }

</script></head>


et pour un dplacement non pas par mouvement de la souris mais par clic sur bouton flche haut et flche bas :

flche haut :
<a href="javascript:" onfocus="this.blur()" onmousedown="javascript:moveLayer(1);" onmouseup="javascript:clearTimeout(Timer);"><img src="images/texte_fleche_haut.gif" width="12" height="12" hspace="22" border="0" /></a>


votre texte (dans le <script> dans le <head>, il est prcis que mon texte fait environ (500px-la taille de contenant, d'o -428px): 
<div id="Support" style="position:relative;width:542px;height:150px;overflow:hidden;border:0px solid #000000">

<div id="Contenu" style="position:absolute;width:542px;height:150px;left:0;top:0">

                          <p>blablablabla</p>

</div>

</div>


flche bas :
<a href="javascript:" onfocus="this.blur()" onmousedown="javascript:moveLayer(-1);" onmouseup="javascript:clearTimeout(Timer);"><img src="images/texte_fleche_bas.gif" width="12" height="12" hspace="22" border="0"/></a>


... texter
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours