MARQUEE EN JAVASCRIPT
cs_Kimjoa
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
14 avril 2009 à 17:47
lecoriace Messages postés 100 Date d'inscription mercredi 28 juillet 2010 Statut Membre Dernière intervention 24 décembre 2023 - 27 sept. 2013 à 12:43
lecoriace Messages postés 100 Date d'inscription mercredi 28 juillet 2010 Statut Membre Dernière intervention 24 décembre 2023 - 27 sept. 2013 à 12:43
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/49830-marquee-en-javascript
https://codes-sources.commentcamarche.net/source/49830-marquee-en-javascript
27 sept. 2013 à 12:43
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>HOUDATECH CONSULTING</title>
<meta name="keywords" content="Site officiel de houdatech consulting" />
<meta name="description" content="Cabinet de conseil spécialisé en gestion de maintenance assisté par ordinateur" />
<!--LIEN DU MENU ICI-->
<link rel='stylesheet' href='styles/styles.css' />
<link rel="icon" type="image/png" href="images/logo officiel.png" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<!--FIN LIEN DU MENU-->
<link href="styles/templatemo_style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<link rel="stylesheet" href="marquee/ressource/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="marquee/jquery/jquery.js"></script>
<script type="text/javascript" src="marquee/jquery/marquee.js"></script>
<script type="text/javascript">
/*
* 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 true)
* - 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)
* - activeCookie : permet de sauvegarder la position du défilement et de la restitué au chargement de al page (acif que durant la session)
*/
$(function(){
$('.section_w250 #marqueeBox1').marquee({
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',
});
$('#marqueeBox2').marquee({
speed : 2,
dirc : 'bottom',
scrollOnMove : true,
maxSpeedOnMove : 10,
expoSpeedOnMove : 3
});
$('#marqueeBox3').marquee({
speed : 0.5,
dirc : 'left',
btSpeedUp : 'btUp3',
btSpeedDown : 'btDown3',
speedActiveBt : 10,
cssActiveBtSpeedUp : 'btUpHActive',
cssActiveBtSpeedDown : 'btDownHActive',
eventBt : 'over',
stopOnOver : true
});
$('#marqueeBox4').marquee({
speed : 2,
dirc : 'right',
stopOnOver : true,
draggable : true,
cursorOverDrag : '../ressource/drag.cur',
cursorOnDrag : '../ressource/move.cur'
});
});
</script>
</head>
<body >
<div id="templatemo_header_wrapper">
<div id="templatemo_header">
<div id="image">
<img src="images/gljdfgior2.png" />
</div>
<!--<div id="twitter"><a href="#"> </a></div>-->
</div> <!-- end of header -->
</div> <!-- end of header wrapper -->
<div id="templatemo_menu_wrapper">
<!-- commence of menu -->
<!--<div id="templatemo_menu">
<ul>
<li><a href="#" class="current"><span></span>Homepage</a></li>
<li><a href="#" target="_parent"><span></span>Templates</a></li>
<li><a href="http://www.koflash.com" target="_blank"><span></span>Gallery</a></li>
<li><a href="#"><span></span>Partners</a></li>
<li><a href="#"><span></span>Contact</a></li>
<a href="http://fr.vectorhq.com" title="fichier vectoriel from fr.vectorhq.com" class="templatemo_menu_right" rel="nofollow" target="_blank"></a>
</ul>
</div>-->
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Accueil</span></a></li>
<li class='has-sub'><a href='#'><span>Nos services</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Logiciels</span></a>
<ul>
<li><a href='#'><span>GPAO</span></a></li>
<li><a href='#'><span>GMAO gestion SAV</span></a></li>
<li><a href='#'><span>Outil d'ordonnancement</span></a></li>
<li class='last'><a href='#'><span>Suivit de fabrication</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='pages/Management industriel.html'><span>Management industriel</span></a>
<ul>
<li><a href='pages/diagnostic_de_maintenance.html'><span>Diagnostic de maintenance</span></a></li>
<li class='last'><a href='pages/programme_prevaction.html'><span>Programme prev'action</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Formation technique</span></a>
<ul>
<li><a href='pages/Mgmnt_de_la_Maintenance.html'><span>Mgmt de maintenance</span></a></li>
<li><a href='pages/Mgmnt_de_la_Production.html'><span>Mgmt de production</span></a></li>
<li class='last'><a href='pages/Technique industrielle.html'><span>technique industriel</span></a></li>
</ul>
</li>
<li><a href='#'><span>Realisations</span></a></li>
<li class='has-sub'><a href='#'><span>Documentation</span></a>
<ul>
<li><a href='pages/Technotrucs.html'><span>Technotrucs</span></a></li>
<li class='last'><a href='pages/Management industriel.html'><span>Management industriel</span></a></li>
</ul>
</li>
<li><a href='#'><span>Galerie</span></a></li>
<li class='last'><a href='pages/contact.html'><span>Contact</span></a></li>
</ul>
</div>
<!-- end of menu -->
</div> <!-- end of menu wrapper -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<div class="section_w620 fl margin_right_50">
<div class="header_01">
Qui sommes nous ?</div>
<p class="em_text">Nous sommes cabinet de conseil spécialisé en gestion de maintenance sur le plan technique, organisationnel et du système d'information. Notre objectif est d'apporter des solutions pratiques aux divers problémes opérationnels qui destabilisent les entreprises afin de les faire parvenir "au zéro panne"</p>
<p><strong>Dans le but de vous aider à améliorer votre système d'information, le cabinet HOUDATECH CONSULTING vous propose la solution adoptée par les professionnels : la G.M.A.O(Gestion de Maintenance Assistée par Ordinateur).</strong></p>
<div class="margin_bottom_40"></div>
<div class="section_320 fl margin_right_40">
<div class="header_01">
<div>FIABILISEZ VOS EQUIPEMENTS</div>
</div>
<p class="em_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis eros eu mauris sollicitudin luctus. </p>
<p>Pellentesque condimentum, urna a luctus porta, lacus lacus pretium ante, sed vehicula leo dolor a nisi. Aliquam erat volutpat. Etiam dictum pellentesque elit eu viverra. Vestibulum egestas, purus ac cursus porttitor, sem metus fringilla purus.</p>
<ul class="list_01">
<li>
<div><a href="#">Zéro-panne avec le programme TPM</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Programme d'Efficacité énergétique
</a></li>
</ul>
</div>
<div class="section_w250_without_padding fl">
<div class="header_01">
<div>PILOTEZ VOS OPERATIONS</div>
</div>
<div class="image_wrapper_01">
<a href="#" target="_parent"><img src="images/templatemo_image_01.jpg" alt="image" width="240" height="120" /></a> </div>
<p>
<ul class="list_01">
<li>
<div><a href="#">Logiciels industriels (GMAO, GPAO, APS)
</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Programme d'Efficacité énergétique
</a></li>
</ul>
</p>
</div>
<div class="margin_bottom_40"></div>
<div class="section_320 fl margin_right_40">
<div class="header_01">
<div>
<div>FORMEZ VOS HOMMES
</div>
</div>
</div>
<div class="image_wrapper_01">
<a href="#" target="_parent"><img src="images/Sans titre-1.png" alt="image" width="240" height="120" /></a> </div>
<ul class="list_01">
<li>
<div><a href="#">Séminaires de formation
</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Formation professionnelle
</a></li>
</ul>
</div>
<div class="cleaner"></div>
</div>
<div class="section_w250 fr">
<div class="section_w250_title news_title">
Nos clients
</div>
<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
</div>
</div>
<div class="margin_bottom_20"></div>
<div class="section_w250_title testimonial_title">
Management</div>
<div class="w250_content">
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Qu'appelez vous une panne?</a></div>
<p>Voila une question simple, mais qui ...</p>
<div class="header_02"><a href="pages/Management industriel.html#riskmag">Les risques du magasin</a></div>
<p>Votre plus grande hantise avec le</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Pourquoi le plan de maintenance?</a></div>
<p>Pendant que les financiers font leur...</p>
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Etes vous condamné au 5S...?</a></div>
<p>Le 5S est beaucoup plus qu'une opération set-setal</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Atteindre le zero panne</a></div>
<p>Voila un titre bien provocateur pour bon nombre</p>
</div>
<div class="margin_bottom_20"></div>
</div>
<div class="margin_bottom_20"></div>
</div> <!-- end of content -->
</div> <!-- end of content wrapper -->
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
Copyright © 2013 <a href="#">HOUDATECH CONSULTING</a> |
<a href="#/page/1" target="_parent"></a>
<div class="margin_bottom_20"></div>
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
</div> <!-- end of footer -->
</div> <!-- end of footer wrapper -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
<script src='js/logging.js'></script>
<!--<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
</div>
</div>
<br />-->
</body>
11 sept. 2011 à 16:11
Ce script permet donc de se passer de 'marquee' et offre d'autres effets intéressants.
11 sept. 2011 à 02:30
this.coefOverSpeed=coefOverSpeed || 0;
J'ai alors l'effet que je voulais vraiment pour un scroll vertical classique avec arrêt par onmouseover.
C'est super !
Reste à voir si la page qui contiendra ce script sera validée en XHTML 1.0 Transitional (je n'ai pas encore vérifié).
Bravo et merci !
29 nov. 2010 à 16:59
j'aime beaucoup ton script que j'utilise sur un de mes sites. L'intégration s'est passé sans (trop) de problèmes.
Par contre, je ne mets pas 10 car tu as restreint le fonctionnement du passage de la souris à la seule accélération et abitrairement en te basant sur la zone du milieu. Par exemple, j'avais besoin que le marquee s'arrete et non pas qu'il accélère. Il serait interessant que tu rajoute un paramètre qui permette de définir comment on veut que celà fonctionne
Autre modif que j'ai du faire, c'est que le marquee est déjà rempli lorsqu'il commence ( this.startStep=0; )
Et pour un défilement en continu, j'ai rajouté un clonage de div, parceque sinon, il faut attendre que tout le message ait disparu pour le voir réapparaitre à nouveau.
Je mets ici mes modifs pour le cas ou celà inspirerait qqu'un:
function Marquee(box,content,speed,dirc,coefOverSpeed){
//ini les variables
this.box=$(box);
this.content=$(content);
this.speed=speed || 1;
this.dirc=dirc || 'top';
this.coefDirc=1;
this.coefOverSpeed=coefOverSpeed || 3;
this.inverseDirc=(this.dirc=='bottom' || this.dirc=='right');
var horizontalDirc=(this.dirc=='bottom' || this.dirc=='top');
//on repositionne les élements + cache les scrolls
this.box.style.overflow='hidden';
this.box.style.position='relative';//ie7 bug
this.content.style.position='relative';
//on clone le content pour avoir un affichage continu
this.content_double = this.content.cloneNode(this.content);
this.box.appendChild(this.content_double);
//calcule la dimension du conteneur + la dimention du contenue
var boxDim=this.box['client'+(horizontalDirc?'Height':'Width')];
var contentDim=this.content['offset'+(horizontalDirc?'Height':'Width')];
//on definit las position max et de départ
this.maxDim=this.inverseDirc?-boxDim:-contentDim;
this.startStep=0;
this.currentStep=this.startStep;
//ajoutes les evenemnts
this.eventOver=this.onMouseover.bindAsEventListener(this);
Event.observe(this.box,'mouseover',this.eventOver);
this.eventOut=this.onMouseout.bindAsEventListener(this);
Event.observe(this.box,'mouseout',this.eventOut);
this.interval=setInterval(this.interval.bind(this),35);
this.eventUnload=this.unload.bindAsEventListener(this);
Event.observe(window,'unload',this.eventUnload.bind(this));
}
Marquee.prototype={
onMouseout : function(e){
Event.stopObserving(this.box,'mousemove',this.eventMouseMove);
this.coefDirc=1;
},
onMouseover : function(e){
var dim=Element.viewportOffset(this.box);
if(this.dirc=='top' || this.dirc=='bottom'){
this.coor=[dim[1],dim[1]+this.box.clientHeight];
}else this.coor=[dim[0],dim[0]+this.box.clientWidth];
this.mouseMove(e);
this.eventMouseMove=this.mouseMove.bindAsEventListener(this);
Event.observe(this.box,'mousemove',this.eventMouseMove);
},
interval : function(){
var acc=this.speed*this.coefDirc;
$(this.content).style[this.dirc]=this.currentStep-acc+'px';
$(this.content_double).style[this.dirc]=this.currentStep-acc+'px';
this.currentStep-=acc;
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;
}
},
mouseMove:function(e){
this.coefDirc = 0; // on bloque le défilement
},
unload : function(){
clearInterval(this.interval);
Event.stopObserving(this.box,'mouseover',this.eventOver);
Event.stopObserving(this.box,'mouseout',this.eventOut);
Event.stopObserving(window,'unload',this.eventUnload.bind(this));
}
}
Event.observe(window, 'load', init_carousel);
function init_carousel(){
/*
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('carousel_conteneur','carousel',1,'top',0);
}
//////////////////
Merci pour ton script
31 août 2010 à 16:48
Le tien contient quelques petites erreurs :fermeture </html> par exemple et d'autres que n'importe qui peut corriger facilement.
Il est facile a parametrer et donc a utiliser.
Bravo, continue.
PatrickBangkok (neophyte de la construction de site)
7 juin 2010 à 12:41
http://www.javascriptfr.com/codes/MARQUEE-VERSION2-COMPATIBLE-MOOTOOLS-JQUERY-PROTOTYPE-SANS-LIBRAIRIE_51524.aspx
7 juin 2010 à 12:39
Pour l'exemple tu peux allé ici -> http://psallette.fr/
7 juin 2010 à 10:07
ou peut-on voir des exemples ?
3 févr. 2010 à 03:31
20 mai 2009 à 17:10
Pour le coup faute de temps j'ai mis en place un malheureux <marquee> mais à l'occasion je me re-pencherais sur ton jolie script.
je repasserais poster le résultat de mes pérégrination au besoin.
13 mai 2009 à 17:11
13 mai 2009 à 17:05
Quelqu'un d'autre a t-il observé quelque chose de similaire ?
21 avril 2009 à 20:36
17 avril 2009 à 12:57
concernant la direction , c'est tout à fait possible , par défaut cette option vaut 3 , pour faire simple faut juste remplacé cette ligne .
this.coefOverSpeed=coefOverSpeed || 3;
par
this.coefOverSpeed=coefOverSpeed || 0;
voià, je reposte pas pour si peu...
merci pour la note crazygogo , j'espère que ça te servira !!
a++
17 avril 2009 à 09:47
16 avril 2009 à 23:56
Pour le white-space, pourquoi ne l'ajoute tu pas dynamiquement ? Sinon, bonne source, je n'ai pas vu la version modifié mais serais-ce possible que lorsque l'on aille d'un bord, cela ne change pas de direction ?
JDMCreator
16 avril 2009 à 18:07
!!! si vous voulais faire marquee horizontale, placé toujours le contenue dans un span , et aussi avec un style white-space : nowrap;
bye
15 avril 2009 à 15:14
concernant la compatibilité sur chrome , j'avais éssayé y a 1 an de ça avec un doctype transitional , et ça ne marchait pas, oui je sais 1 an c'est énorme :) , après c'est sur respecté les normes à fond c'est une chose , mais est-ce vraiment utile si aux final c'est 100% compatible?? .... perso , je suis pas un acharné des normes, mais ais créer ce script pour kil soit aussi plus évolutif que la simple balise marquee , y'a déjà un système de défilement au passage de la sourie en plus , j'ai pas le temps d'en faire plus , vous peux être :) ,par exemple un systeme de scroll à barre et bouton plus classique , ou scroller directement le contenue avec un mouse down , intégrer des items au contenue pour un défilement discontinue ect... En faite je lais fais surtout pour bien comprendre la méthode pour le développement ma librairie, dont je reprendrais le développement après le taff qui m'a été confié ...
Pour info , une règle css comme marque devrait voire le jour en css3 , donc dans 10 ans , çà fait 10 de moins :)
Concernant ie7, je règle ce beug de suite, et élargie mes testes de compatibilité.
a++
15 avril 2009 à 13:57
Cependant, il est tout à fait possible de l'utiliser dans un document purement Html et dénué de doctype.
A partir du moment où on précise la compatibilité du document (html/xhtml => doctype), il faut bien-entendu oublier cette balise.
Tout dépend du développeur.
15 avril 2009 à 09:59
http://i87.servimg.com/u/f87/13/27/85/89/2009-010.png
15 avril 2009 à 09:54
avec Chrome compris...
exemple avec des liens et des images :
<marquee OnMouseOver="this.stop();"
OnMouseOut="this.start();">
[url1 ]
[url2 ]
[url3 ]
[url4 ]
</marquee>
l'organisme dont on parle reconnaitra
sûrement cette balise dans 20 ans...
@+
15 avril 2009 à 09:34
14 avril 2009 à 23:46
bye
14 avril 2009 à 23:35