Marquee version2 compatible mootools, jquery, prototype et sans librairie

Soyez le premier à donner votre avis sur cette source.

Vue 5 834 fois - Téléchargée 837 fois

Description

Suite au succès de la première version, et de beaucoup de messages mail, je met à disposition cette nouvelle version. J'ai rajouté la possibilité de définir des boutons de défilement, en fonction des évènements mouseover, ou mouseup.

Il est toujours possible de gére le scroll automatique au survol de la sourie.
On peux faire défiler le contenue en restant le bouton appuyé sur la sourie et en la déplacant.

On peux aussi activer les cookie pour quel le contenue ne change pas de place au chargement de la page.

J'ai aussi adapté ce code au 3 grosses librairie js, à savoir, Mootools, jQuery et Prototype.

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>

<link rel="stylesheet" href="../ressource/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
   
  
   function init(){
      
	  
	 /* 

  • Définition de Marquee, fonction de défilement
  • @param box (string/node) le noeud marquee
  • @param options (map) les options
  • - speed : la vitesse du déplacement (default 0.5)
  • - dirc : la direction du déplacement (default top)
  • - btSpeedUp : la bouton d'accélération
  • - btSpeedDown : la bouton d'esaccélération
  • - speedActiveBt : vitesse d'accélaration pour le bouton (default 10)
  • - cssActiveBtSpeedUp : class du bouton accélération actif
  • - cssActiveBtSpeedUp : class du bouton desaccélération actif
  • - eventBt : l'évenement de l'activation de bouton (default over, sinon down)
  • - stopOnOver : pour stopper le difelement au survole (default false)
  • - scrollOnMove : pour actievr le scrolling au survole
  • - maxSpeedOnMove : vitesse d'accélaration pour le scrool (default 10)
  • - expoSpeedOnMove : comportement exponentiel de l'accélaration (default 2)
  • - draggable : permet de scroller le contenue lors d'un drag (default false)
  • - cursorOverDrag : définit l'url du curseur à utilisé pour spécifié que le contenue peux etre "dragger"
  • - cursorOnDrag : définit l'url du curseur à utilisé pour spécifié que le contenue est en train d'etre "dragger"
  • /
new Marquee('marqueeBox1', { speed : 0.5, dirc : 'top', btSpeedUp : 'btUp1', btSpeedDown : 'btDown1', speedActiveBt : 10, cssActiveBtSpeedUp : 'btUpVActive', cssActiveBtSpeedDown : 'btDownVActive', eventBt : 'down', draggable : true, cursorOverDrag : '../ressource/drag.cur', cursorOnDrag : '../ressource/move.cur' }); new Marquee('marqueeBox2', { speed : 2, dirc : 'bottom', scrollOnMove : true, maxSpeedOnMove : 10, expoSpeedOnMove : 3 }); new Marquee('marqueeBox3', { speed : 0.5, dirc : 'left', btSpeedUp : 'btUp3', btSpeedDown : 'btDown3', speedActiveBt : 10, cssActiveBtSpeedUp : 'btUpHActive', cssActiveBtSpeedDown : 'btDownHActive', eventBt : 'over', stopOnOver : true }); new Marquee('marqueeBox4', { speed : 2, dirc : 'right', stopOnOver : true, draggable : true, cursorOverDrag : '../ressource/drag.cur', cursorOnDrag : '../ressource/move.cur' }); } </script> </head> <body onload='init()'> <h1>{<br /> speed : 0.5,<br /> dirc : 'top',<br /> btSpeedUp : 'btUp1',<br /> btSpeedDown : 'btDown1',<br /> speedActiveBt : 10,<br /> cssActiveBtSpeedUp : 'btUpVActive',<br /> cssActiveBtSpeedDown : 'btDownVActive',<br /> eventBt : 'down',<br /> draggable : true,<br /> cursorOverDrag : '../ressource/drag.cur',<br /> cursorOnDrag : '../ressource/move.cur'<br /> }</h1> <a id='btUp1' class='btUpV'></a> <div id='marqueeBox1' class='marqueeBoxV drag'> <div id='contentBox1'> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> </div> </div> <a id='btDown1' class='btDownV'></a> <br /> <h1>{<br /> speed : 2,<br /> dirc : 'bottom',<br /> eventBt : 'over',<br /> stopOnOver : false,<br /> scrollOnMove : true,<br /> maxSpeedOnMove : 10,<br /> expoSpeedOnMove : 3<br /> }</h1> <div id='marqueeBox2' class='marqueeBoxV'> <div id='contentBox2'> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br /> </div> </div> <div class='horizontale'> <h1>{<br />speed : 0.5,<br /> dirc : 'left',<br /> btSpeedUp : 'btUp3',<br /> btSpeedDown : 'btDown3',<br /> speedActiveBt : 10,<br /> cssActiveBtSpeedUp : 'btUpHActive',<br /> cssActiveBtSpeedDown : 'btDownHActive',<br /> eventBt : 'over',<br /> stopOnOver : true<br /> }</h1><br /> <a id='btUp3' class='btUpH'></a> <div id='marqueeBox3' class='marqueeBoxH'> <span id='contentBox3'> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> </span> </div> <a id='btDown3' class='btDownH'></a> </div> <br /><br /><br /><br /> <div class='horizontale'> <h1>{<br /> speed : 2,<br /> dirc : 'right',<br /> stopOnOver : true,<br /> draggable : true,<br /> cursorOverDrag : '../ressource/drag.cur',<br /> cursorOnDrag : '../ressource/move.cur'<br /> }</h1><br /> <div id='marqueeBox4' class='marqueeBoxH'> <span id='contentBox4'> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> </span> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body>

Conclusion :


on pourrait mettre de barre de scroll , mais j'ai pas le temps.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
dimanche 20 février 2011
Statut
Membre
Dernière intervention
20 février 2011

Hello Piballo, peux-tu préciser à quel endroit précisément on doit mettre ta condition :


"
if(this.options.activeCookie && this.box.id){
Event.observe(window, 'unload', this.saveCookie.bindAsEventListener(this));
this.currentStep = this.getCookie() || this.startStep;
}else{
if(this.options.boucle == true){
this.currentStep =0;
}else{
this.currentStep = this.startStep;
}
}
"

Merci !
Messages postés
10
Date d'inscription
lundi 20 décembre 2004
Statut
Membre
Dernière intervention
26 février 2005

Bon j'ai réussi, si ça intéresse quelqu'un, j'ai ajouté une option boucle et modifié :

Cette fonction

if(this.options.activeCookie && this.box.id){
Event.observe(window, 'unload', this.saveCookie.bindAsEventListener(this));
this.currentStep = this.getCookie() || this.startStep;
}else{
if(this.options.boucle == true){
this.currentStep =0;
}else{
this.currentStep = this.startStep;
}
}

puis celle ci :

setSteep : function(){;
var acc = this.options.speed;
this.content.style[this.options.dirc] = this.currentStep - acc + 'px';
this.currentStep -= acc;
if(this.options.boucle == true){
if(this.currentStep >= 0)
this.currentStep = 0;
if(this.inverseDirc){
if(this.currentStep < this.maxDim+ this.startStep)
this.currentStep = this.maxDim+ this.startStep;
}else if(this.currentStep < this.maxDim+ this.startStep){
this.currentStep = this.maxDim+ this.startStep;
}
}else{
if(this.currentStep > this.startStep)
this.currentStep = this.maxDim;
if(this.inverseDirc){
if(this.currentStep < this.maxDim)
this.currentStep = this.startStep;
}else if(this.currentStep < this.maxDim){
this.currentStep = this.startStep;
}
}

},
Messages postés
10
Date d'inscription
lundi 20 décembre 2004
Statut
Membre
Dernière intervention
26 février 2005

Super source, j'aimerai l'utiliser comme slider, peut on faire en sorte que ça ne boucle pas ? je m'explique, je le lance avec speed à 0 et je voudrais que ça défile uniquement au passage sur les flèches, jusque la pas de soucis mais du coup j'aimerai qu'au départ le clip contenant les éléments soit donc calé à gauche et pas caché et que lorsqu'on arrive à l'extrémité gauche ou droite ça ne boucle pas, est ce possible ? en espérant être clair dans ma demande :$
merci d'avance.
Messages postés
1
Date d'inscription
jeudi 29 avril 2010
Statut
Membre
Dernière intervention
29 avril 2010

Marche très bien sur mon site en local, merci pour le code !
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

ba ca fait plaisir a entendre :) a++
Afficher les 30 commentaires

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.