Marquee version2 compatible mootools, jquery, prototype et sans librairie

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_Kimjoa)