Sources javascript - Club d'entraide des développeurs francophones

 
<html>
<head>
<title>...</title>

<style type="text/css">
body {margin:0px}
img {display:none;position:absolute}
// propriétés de la boîte à images;"position" et "overflow" sont nécessaires;
#c {display:none;margin-top:100px;background-color:#ffcc00;position:relative;overflow:hidden;}
</style>

</head>

<body>
<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>
<div id="nul"></div>

<div style="margin-top:50px;margin-left:50px">
<strong>
En passant sur la boîte à images, on décide du sens et de la vitesse de défilement;<br />
En cliquant sur la zone, on stoppe le défilement et on active les liens images;<br/>
On peut alors afficher chaque image dans une fenêtre indépendante (pas d'agrandissement ici,
ce n'est pas le but);<br />
Si on reclique dans la zone, on relance le défilement;
</strong>
</div>

<script type="text/javascript">

//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array();
var pos=0;
var val=0;
var oui=true;


//||||||||||||||||||||||||
//Variables paramétrables|
//||||||||||||||||||||||||
var M=100;// marge de gauche de la boîte à images;

var W=300;// largeur de la boîte à images
// (forcément supérieure à la somme des largeurs des images);

var H=100;// hauteur de la boîte à images;

var delai=Math.round(W/4);// le délai initial est d'un quart
// de la largeur de la boîte;


//|||||||||||||||||||||
//Création de la boîte|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginLeft=M+"px";
c.style.width=W+"px";
c.style.height=H+"px";

var dec=M+W/2;// position horizontale au centre de la boîte;


//||||||||||||||||||||
//Création des images|
//||||||||||||||||||||
for(i=0;i!=60;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="http:/ /javatwist.imingo.net/sm"+zero+(i+1)+".gif";
   c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));


//|||||||||||||||||||||||
//Déplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
   lf=parseInt(tab[i].style.left);
   w=tab[i].width;
   tab[i].style.left=lf+val+"px";
   if(lf>pos-w){
      tab[i].style.left=lf-pos+"px"};
   if(lf<W-pos){
      tab[i].style.left=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}


//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientX : e.pageX;

if(el>=dec){
   delai=W/2+2-(el-dec);val=2}// val=déplacement
else{
   delai=W/2-1-(dec-el);val=-2};// val=déplacement
}


//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;


//|||||||||||||||||||||||||||||||||||||||||||||||||
//Pause / relance du script / activation des liens|
//|||||||||||||||||||||||||||||||||||||||||||||||||
c.onclick=function(){
   if(oui){clearTimeout(timer);oui=false;
      for(i in tab){
         tab[i].style.cursor="pointer"};
   }
   else{go();oui=true;
      for(i in tab){
         tab[i].style.cursor="default"};
   };
}


//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
for(i in tab){
   tab[i].onclick=function(){
      if(this.style.cursor=="pointer"){
         window.open(this.src)}
      };
}

//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.left=pos+"px";
tab[i].style.top=(H-tab[i].height)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].width;
}
go();
}

</script>

</body>
</html>

<html> <head> <title>Galerie</title> <script type='text/javascript'> var num=1; // numéro du fichier courant var min=1; // nombre minimum de fichiers var max=11; // nombre maximum de fichiers var extension = '.png'; /* fonction qui permet d'afficher les images */ function Affich() { var file; // on ajoute des '0' afin de créer le nom du fichier if(num<10) file = '00'+num+extension; if(num<100 && num>=10) file = '0'+num+extension; // on affiche l'image correspondante document.getElementById('affich').innerHTML="<img src='"+file+"' alt='"+file+"' />"; } /* fonction qui permet de revenir à l'image précédente */ function Prev() { // si num>min car il ne faudrait pas descendre en dessous if(num>min) { num--; // on décrémente num Affich(); // et on fait appel à la fonction Affich() } } /* fonction qui permet d'aller à l'image suivante */ function Next() { // si num<min car il ne faudrait pas allerr au dessus if(num<max) { num++; // on décrémente num Affich(); // et on fait appel à la fonction Affich() } } </script> </head> <body onload="Affich()"> <div id="body"> <div id="affich">  </div> <hr /> <div id="nav"> <p> <a href="#" title="Précédant" onclick="Prev()"> <span><-</span> Précédant</a> <span> | </span> <a href="#" title="Suivant" onclick="Next()">Suivant <span>-></span></a> </p> </div> </div> </body> </html>

<div align="center" style="letter-spacing: 4" id="texte"> <a href="#"><b>Quelle jolie pub !</b></a> </div> <script type='text/javascript'> vit = 0.3; function zooo() { if(i > 3) clearInterval(s); i+= vit; document.getElementById('texte').style.letterSpacing = i; } setInterval("i = -8; s = setInterval('zooo()', 25)", 10000); </script>

<div align="center" style="letter-spacing: 4" id="texte"> <a href="#"><b>Quelle jolie pub !</b></a> </div> <script type='text/javascript'> var i = 1, up=true; function zooo() { document.getElementById('texte').style.letterSpacing = i; up = (i>1| i<-12)?!up:up; i= (up)?i-1:i+1; } s = setInterval('zooo()', 100); </script>