système de défilement automatique, un peu comme marquee, compatible avec prototype.js .
La balise marquee ne respect pas les standards et chrome ne la prend pas en charge...
liste des arguments possibles :
- id ou élément conteneur
- id ou élément contenue
- vitesse initiale
- direction du déplacement
- vitesse du scrolling , lors d'un mouse mouve au dessus de l'élément
testé sous ie8 , ff3 et chrome.
Source / Exemple :
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>simpleMarquee</title>
<style>
h1{
font-size:15px;color:green;margin:auto;border-bottom:1px solid green;width : 450px;
}
.marqueeBoxH, .marqueeBoxV{
margin:auto;border:1px solid black;overflow:scroll;
}
.marqueeBoxH{
width:450px;height:25px;white-space : nowrap;
}
.marqueeBoxV{
width:150px;height:150px;
}
</style>
<script type="text/javascript" src="prototypeTo.js"></script>
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
//définit une fonction a appliquer a la fin du chargement
Event.observe(window, 'load', init);
function init(){
/*
liste des arguments possibles :
- id ou element conteneur
- id ou element contenue
- vitesse initiale
- direction du déplacement
- vitesse du scrolling , lors d'un mouse mouve au dessus de l 'élement
new Marquee('marqueeBox1','contentBox1',0.5,'top',3);
new Marquee('marqueeBox2','contentBox2',1,'bottom',5);
new Marquee('marqueeBox3','contentBox3',2,'left',10);
new Marquee('marqueeBox4','contentBox4',1.5,'right',3);
}
</script>
</head>
<body >
<h1>vitesse->0.5 , direction->top , vitesse Maxi du défilement->3</h1>
<div id='marqueeBox1' class='marqueeBoxV'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
</div>
</div><br />
<h1>vitesse->1 , direction->bottom , vitesse Maxi du défilement->5</h1>
<div id='marqueeBox2' class='marqueeBoxV'>
<div id='contentBox2'>
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
du blabla en HTML oui oui !! <img src='image.gif' /> <br />
</div>
</div><br />
<h1>vitesse->1.5 , direction->right , vitesse Maxi du défilement->10</h1>
<div id='marqueeBox3' class='marqueeBoxH'>
<div id='contentBox3'>
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
</div>
</div><br />
<h1>vitesse->2 , direction->left , vitesse Maxi du défilement->3</h1>
<div id='marqueeBox4' class='marqueeBoxH'>
<div id='contentBox4'>
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
du blabla en HTML oui oui !! <img src='image.gif' />
</div>
</div>
</body>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.