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 472 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
jpax Messages postés 1 Date d'inscription mercredi 22 décembre 2004 Statut Membre Dernière intervention 6 mars 2009
6 mars 2009 à 17:08
bof !!!
koprax Messages postés 2 Date d'inscription samedi 28 mai 2005 Statut Membre Dernière intervention 25 février 2009
7 juil. 2005 à 12:03
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 !
aljarrah Messages postés 5 Date d'inscription vendredi 10 novembre 2000 Statut Membre Dernière intervention 13 avril 2005
15 avril 2005 à 03:26
salut ...je ne sais pas comment ca marche...est se que ca peus marcher comme copier coler...html
martinjeannot Messages postés 1 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 5 janvier 2005
5 janv. 2005 à 11:11
bien, bon script qui a l'avantage de fonctionner sous IE, Mozilla, Opera. ce qui est rare.
cs_leflambeau Messages postés 3 Date d'inscription samedi 1 janvier 2005 Statut Membre Dernière intervention 2 janvier 2005
2 janv. 2005 à 01:03
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.