Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 6 sur 6
  1. #1
    Membre éprouvé
    Profil pro
    Inscrit en
    février 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : février 2009
    Messages : 354
    Points : 432
    Points
    432

    Par défaut Marquee compatible Mootools, Jquery, Prototype et sans librairie

    Ce script émule la balise marquee, et bien plus encore.

    On peux définir des boutons de défilement, en fonction des évènements mouseover, ou mouseup.

    Il est possible de gérer le scroll automatiquement au survol de la sourie.
    ou faire défiler le contenue en restant le bouton appuyé sur la sourie et en la déplaçant.

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

    voici un exemple d'utilisation, sinon tout ce trouve dans le zip.
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    <!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>
    Fichiers attachés Fichiers attachés

  2. #2
    Invité de passage
    Profil pro Benoit
    Inscrit en
    juillet 2010
    Messages
    1
    Détails du profil
    Informations personnelles :
    Nom : Benoit

    Informations forums :
    Inscription : juillet 2010
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Merci tout plein pour ce script !

    Juste une petite info pour ceux qui, tête en l'air comme moi, chercheraient pourquoi le marquee s'affiche sur plusieurs lignes quand le texte dépasse la taille de la div dans laquelle il est affiché :

    Dans le fichier CSS, il faut que la boite qui contient le texte ("contentBox" dans l'exemple) ait : white-space: nowrap; (pour supprimer le retour à la ligne)

    c'est le cas dans le fichier CSS fourni avec l'exemple mais j'étais totalement passé à côté...

  3. #3
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 456
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 456
    Points : 34 037
    Points
    34 037

    Par défaut J'aime ça!

    Pas mal.
    Merci beaucoup pour ce script.

  4. #4
    Invité de passage
    Profil pro fred
    Inscrit en
    février 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Nom : fred
    Âge : 51

    Informations forums :
    Inscription : février 2011
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Merci je vais tester

  5. #5
    Invité
    Invité(e)

    Par défaut

    il ne manque plus que la prise en charge de la molette

  6. #6
    Membre régulier Avatar de Merlo
    Homme Profil pro
    Etudiant en Administration Réseau
    Inscrit en
    juillet 2012
    Messages
    117
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Etudiant en Administration Réseau
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juillet 2012
    Messages : 117
    Points : 73
    Points
    73

    Par défaut

    c'est vraiment génial!!
    je crois qu'il faille que je le teste immédiatement
    Il vaut mieux aller plus loin avec quelqu'un que nulle part avec tout le monde.

    La motivation vous sert de départ. L'habitude vous fait continuer.

    ----Le réseau, c'est notre affaire----

    UNIVERS DE L'INFORMATIQUE

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •