1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Une bannière défilante avec changement de sens et arret.

Une bannière défilante avec changement de sens et arret.

Soyez le premier à donner votre avis sur cette source.

Snippet vu 28 258 fois - Téléchargée 29 fois

Commenter

Contenu du snippet

Ce script permet de reproduire, en quelque sorte la balise "Marquee" d'IE, mais valable pour N4.7 et + et IE4 et +...; tout en l'améliorant un peu.
      • Mise a jour : j'ai supprimé la partie gérant NN4.7 et modifier les parties gérant IE et Mozilla***

C'est a dire changement de sens, et arret quand la souris passe sur le message défilant.
Le script ne fait pas appel au <marquee> ou au <ilayer src> et <iframe src>

Source / Exemple : 


<!--
//***************************************************************************
//***************************** MADE BY ALTI *********************************
//***************************************************************************/
// modifié le 10/01/2005

messages = new Array();

// pour le tableau de donnée source (données défilantes) il est possible de formatter l'affichage via des balises styles comme ci dessous!
messages[0]="<span style='background-color:green;color:white;vertical-align:bottom'> Accor </span><img src='/alti/images/btn_droit.gif' style='width:16px;height:16px'>";
messages[1]=" Thales <img src='/alti/images/btn_gauche.gif' style='width:16px;height:16px'>";
messages[2]=" AGF <img src='/alti/images/btn_bas.gif' style='width:16px;height:16px'>";
messages[3]=" Air liquide <img src='/alti/images/btn_haut.gif' style='width:16px;height:16px'>";
messages[4]=" Alcatel <img src='/alti/images/boule_h.gif' style='width:16px;height:16px'>";
messages[5]=" Alstom";
messages[6]=" Aventis";
messages[7]=" Axa";
messages[8]=" BNP";
messages[9]=" Bouygues";
messages[10]=" Cap Gemini";
messages[11]=" Carrefour";
messages[12]=" Crédit Lyonnais";
messages[13]=" Groupe Casino";
messages[14]=" Dexia";
messages[15]=" Equant";
messages[16]=" France Telecom";
messages[17]=" L'Oréal";
messages[18]=" Lafarge";
messages[19]=" Lagardère";
messages[20]=" LVMH";
messages[21]=" Peugeot";
messages[22]=" PPR Group";
messages[23]=" Renault";
messages[24]=" Saint Gobain";
messages[25]=" Sanofi Synthelabo";
messages[26]=" Schneider Electric";
messages[27]=" Société générale";
messages[28]=" ST";
messages[29]=" Suez Lyonnaise des Eaux";
messages[30]=" TF1";
messages[31]=" Total Fina Elf";
messages[32]=" Valeo";
messages[33]=" Eads";
messages[34]=" Thomson mm";
messages[35]=" Vivendi";
messages[36]=" Michelin";
messages[37]=" Dassault";
messages[38]=" Danone";
messages[39]=" Sodexho";

if (messages.length>1) i=2
else i=0

divWidth=300;
divHeight=20;
//function pour IE
function moveAll(whichdiv,autre,sig,speed,offsetW){
tdiv=eval(whichdiv);
adiv=eval(autre);
tdivstyle=tdiv.style;
adivstyle=adiv.style;
gauche="pixelLeft";
signe=(eval("sig")=='neg')?-1:1
if (eval("parseInt(tdivstyle."+gauche+")")==parseInt(signe)){
    tdivstyle.left=0;
    actu=setTimeout("moveAll(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
    return actu
}
if (signe==1) ppp="parseInt(tdivstyle."+gauche+")>=(offsetW*-1)+1"; else ppp="parseInt(tdivstyle."+gauche+")<=offsetW+1";
if (eval(ppp)){
    position=eval("parseInt(tdivstyle."+gauche+")-parseInt(signe)");
    tdivstyle.pixelLeft=position;
} else {
    position=eval((divWidth*parseInt(signe)));
    tdivstyle.pixelLeft=position;
    tdiv.innerHTML=messages[i];
if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
};
if (signe==1) ppp="parseInt(adivstyle."+gauche+")<=(offsetW*-1)+1"; else ppp="parseInt(adivstyle."+gauche+")>=offsetW+1";
if (eval(ppp)){
    position=eval(divWidth*parseInt(signe));
    adivstyle.pixelLeft=position;
    adiv.innerHTML=messages[i];
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
} else {
    position=eval(parseInt(adivstyle.left)-parseInt(signe));
    adivstyle.pixelLeft=position;
}
actu=setTimeout("moveAll(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
return actu
}
//function pour DOM complient hors IE
function moveById(whichdiv,autre,sig,speed,offsetW){
tdiv=eval(whichdiv);
adiv=eval(autre);
tdivstyle=tdiv.style;
adivstyle=adiv.style;
gauche="left";
signe=(eval("sig")=='neg')?-1:1
if (eval("parseInt(tdivstyle."+gauche+")")==parseInt(signe)) {
    tdivstyle.left=0+"px";
    actu=setTimeout("moveById(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed);
    return actu;
}
if (signe==1) ppp="parseInt(tdivstyle."+gauche+")>=(offsetW*-1)+1"; else ppp="parseInt(tdivstyle."+gauche+")<=offsetW+1";
if (eval(ppp)){
    position=eval("parseInt(tdivstyle."+gauche+")-parseInt(signe)");
    tdivstyle.left=position+"px";
  if(eval("parseInt(tdivstyle."+gauche+")==offsetW-"+divWidth+"+1") && signe==-1) {
    doc = document.getElementById("div1");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
  }
} else {
    position=eval((divWidth*parseInt(signe)));
    tdivstyle.left=position+"px";
  if(signe==1) {
    doc = document.getElementById("div1");
    doc.innerHTML=eval("messages["+i+"]");    
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
  }
};
if (signe==1) ppp="parseInt(adivstyle."+gauche+")<=(offsetW*-1)+1"; else ppp="parseInt(adivstyle."+gauche+")>=offsetW+1";
if (eval(ppp)){
    position=eval(divWidth*parseInt(signe));
    adivstyle.left=position+"px";
if (signe==1) {
    doc = document.getElementById("div2");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
    }
} else {
    position=eval(parseInt(adivstyle.left)-parseInt(signe));
    adivstyle.left=position+"px";
if (eval("parseInt(adivstyle."+gauche+")==offsetW-"+divWidth+"+1") && signe==-1) {
    doc = document.getElementById("div2");
    doc.innerHTML=eval("messages["+i+"]");
    if (signe==1) { if (i==messages.length-1) i=0; else i++; } else { if (i<=0) i=messages.length-1; else i--; }
}
}
actu=setTimeout("moveById(tdiv,adiv,'"+sig+"',"+speed+","+offsetW+")",speed)
return actu
}

var divok=0;

function tourne(lesens) {
sens=lesens

if (lesens=='neg') {
switch(i) { case 0: i=messages.length-4; break; case 1: i=messages.length-3; break; default : i-=3; break; }
} else {
if (i==(messages.length-1)) i=0;
else if (i==(messages.length-2)) i=messages.length-1;
else i+=1;

}
one=(one==1)?2:1
stopmove();
startmove();
}

function stopmove() { clearTimeout(actu); }

function startmove() {
two=(one==1)?2:1
if (document.all) {
actu=setTimeout("moveAll(div"+one+",div"+two+",'"+sens+"',vitesse,divWidth)",vitesse);
} else if (document.getElementById) {
actu=setTimeout("moveById(document.getElementById('div"+one+"'),document.getElementById('div"+two+"'),'"+sens+"',vitesse,divWidth)",vitesse);
}

return actu
}

function startscroll() {
if (document.all) {
document.all('div1').style.pixelLeft=1;
document.all('div2').style.pixelLeft=divWidth;
document.all('div2').style.visibility='visible';
actu=moveAll('div1','div2',sens,vitesse,divWidth);
} else if (document.getElementById) {
document.getElementById('div1').style.left=1+"px";
document.getElementById('div2').style.left=divWidth+"px";
document.getElementById('div2').style.visibility='visible';
actu=moveById(document.getElementById('div1'),document.getElementById('div2'),sens,vitesse,divWidth);
}
return actu
}
document.writeln("<st"+"yle type=text/css>");

st="#monid {width:"+divWidth+"px;height:"+divHeight+"px;position:relative;top:0px;background-color:green}\n";
st+="#theid {overflow:hidden;clip:rect(0 "+divWidth+" "+divHeight+" 0);left:0px;top:0px;background-color:red;}\n";
st+="#theid {position:absolute;width:"+divWidth+"px;height:"+divHeight+"px;}\n";
st+="#div2 {position:absolute;width:"+divWidth+"px;left:0px;height:"+divHeight+"px;top:0px;visibility:hidden;color:#FF5555;text-align:center;}\n";
st+="#div1 {position:absolute;width:"+divWidth+"px;left:1px;height:"+divHeight+"px;top:0px;color:blue;font-family:Verdana;font-weight:bold;text-align:center;}\n";
st+=".turn {font-size:48px;color:black;text-decoration:none;}\n";
document.writeln(st);
document.writeln("</st"+"yle>")
if (document.layers ) {

document.write("<table cellpadding=0 cellspacing=0 border=0 width="+eval(divWidth+30)+"><tr><td><a ");
document.write("href=\"javascript:void(tourne('egal'))\" class=\"turn\"><</a></td><td>");
document.write("<ilayer id=\"main\" width="+divWidth+" height=28 top=0 left=0 bgcolor=#FAFAFA visibility=hide>");
document.write("<layer id=\"layer1\" top=0 left=1 width="+divWidth+" onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">");
document.write(messages[0]);
document.write("</layer>");
document.write("<layer id=\"layer2\" left=0 top=0 width="+divWidth+" visibility=hide onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">");
document.write(messages[1])
document.write("</layer>");
document.write("</ilayer>");
document.write("</td><td><a ");
document.write("href=\"javascript:void(tourne('neg'))\" class=\"turn\">></a></td></tr></table>");
} else {

st2="<table cellpadding=0 cellspacing=0 border=0 width="+eval(divWidth+45)+"><tr><td width=15>&nbsp;</td><td width=15><a \n";
st2+="href=\"javascript:void(tourne('egal'))\"  class=\"turn\"><</a></td><td width="+divWidth+">\n";
st2+="<div id=\"monid\" >\n";
st2+="<div id=\"theid\"   >\n";
st2+="<div id=\"div1\"  onmouseover=\"stopmove()\"  onmouseout=\"startmove()\">\n";
document.writeln(st2);
if (document.all) { document.write(messages[0])
} else {
d = document.getElementById("div1");
d.innerHTML=messages[0];
}
document.write("</div>")
document.writeln("<div id=\"div2\" onmouseover=\"stopmove()\"   onmouseout=\"startmove()\">")
if (document.all) { document.write(messages[1]);
}else {
d = document.getElementById("div2");
d.innerHTML=messages[1];
}
document.write("</div>")
document.writeln("</div>")
document.write("</div>");
document.write("</td><td width=15><a ");
document.write("href=\"javascript:void(tourne('neg'))\"  class=\"turn\">></a></td></tr></table>");

}
divok=1; //I use this divok to be sure that all the script is loaded before starting
sens='egal';    //  initializing direction sense
one=1           //this is the number of the first 'div' for the changing sense
vitesse=10; // speed

actu=setTimeout('startscroll()',300);
//-->

Conclusion :


Je sais que le DOM ne préconise pas encore l'utilisation de innerHTML, mais c'est un tel raccourcis!!! et maintenant firefox le gère correctement! (non testé sur opéra)

pour le voir fonctionner il suffit d'aller le voir sur http://alti.free.fr/
section examples!

alti

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
1
Date d'inscription
mercredi 22 décembre 2004
Statut
Membre
Dernière intervention
6 mars 2009
bof !!!
Signaler
Messages postés
2
Date d'inscription
samedi 28 mai 2005
Statut
Membre
Dernière intervention
25 février 2009
salut !
pour que ça marche il suffit d'ajouter au tout début :
<script type="text/javascript">
et à la fin :
</script>
et bien sûr, coller tout ça à l'emplacement où vous souhaitez le voir.

Exemple pour faire défiler des images:
messages[0]="";
messages[1]="";
messages[2]="";

ce code est superbe, merci beaucoup pour ce beau travail !
Signaler
Messages postés
5
Date d'inscription
vendredi 10 novembre 2000
Statut
Membre
Dernière intervention
13 avril 2005
salut ...je ne sais pas comment ca marche...est se que ca peus marcher comme copier coler...html
Signaler
Messages postés
1
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
5 janvier 2005
bien, bon script qui a l'avantage de fonctionner sous IE, Mozilla, Opera. ce qui est rare.
Signaler
Messages postés
3
Date d'inscription
samedi 1 janvier 2005
Statut
Membre
Dernière intervention
2 janvier 2005
même prob
Afficher les 6 commentaires
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.