Voici un exemple fonctionnelle : Colle le dans un nouveau document HTML pour un essais.
Une page blanche, c'est que le script est complet ici, c'est pour un essais et c'est fonctionnelle.
C'est pour répondre à ta question.
- Code: Tout sélectionner
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="javascript" src="http://astuforum.free.fr/js/etoiles-cur.js">
</script>
<script type="text/javascript">
var sparkles=40;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function()
{
if (document.getElementById)
{
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++)
{
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}
}
function sparkle()
{
var c;
if (x!=ox || y!=oy)
{
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c])
{
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++)
{
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i)
{
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i])
{
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown)
{
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else
{
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else
{
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i)
{
if (--tinyv[i]==25)
{
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i])
{
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown)
{
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else
{
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e)
{
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll()
{
if (typeof(self.pageYOffset)=="number")
{
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft)
{
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else
{
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width()
{
if (typeof(self.innerWidth)=="number")
{
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth)
{
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width)
{
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
couleur = "multicolore";
if (couleur == 'multicolore')
{
Rouge = Math.floor(Math.random()*256) ;
Vert = Math.floor(Math.random()*256) ;
Bleu = Math.floor(Math.random()*256) ;
div.style.backgroundColor="rgb("+Rouge+","+Vert+","+Bleu+")";
}
else
{
div.style.backgroundColor=couleur ;
}
return (div);
}
</script>
</head>
<body>
</body>
</html>
Tu pourras le modifier et le centraliser sur un élément en particulier.
Ici la puie d'étoile se fait sur toute la surface écran du navigateur. Aucun autre élément n'aura été ajouter.
Tu peut aussi placer les scripts de cette façon : Seul le premier script dois rester en entête de document.
Le deuxième peut être placer entre <body> et </body>
- Code: Tout sélectionner
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="javascript" src="http://astuforum.free.fr/js/etoiles-cur.js">
</script>
</head>
<body>
<script type="text/javascript">
var sparkles=40;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function()
{
if (document.getElementById)
{
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++)
{
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}
}
function sparkle()
{
var c;
if (x!=ox || y!=oy)
{
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c])
{
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++)
{
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i)
{
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i])
{
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown)
{
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else
{
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else
{
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i)
{
if (--tinyv[i]==25)
{
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i])
{
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown)
{
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else
{
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e)
{
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll()
{
if (typeof(self.pageYOffset)=="number")
{
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft)
{
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft))
{
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else
{
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width()
{
if (typeof(self.innerWidth)=="number")
{
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth)
{
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width)
{
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
couleur = "multicolore";
if (couleur == 'multicolore')
{
Rouge = Math.floor(Math.random()*256) ;
Vert = Math.floor(Math.random()*256) ;
Bleu = Math.floor(Math.random()*256) ;
div.style.backgroundColor="rgb("+Rouge+","+Vert+","+Bleu+")";
}
else
{
div.style.backgroundColor=couleur ;
}
return (div);
}
</script>
</body>
</html>
Tout aussi fonctionnelle seulement la partie script est dans la balise body sauf pour le premier script qui lui cible le fichier .js en externe à l'adresse mentionner. La page reste blanche mais glisse ton curseur sur l'écran.
Il s'agit plutôt d'une pluie de l'opérateur +
Moi j'aurais mis l'opérateur *. M'enfin c'est une opinion personnelle.
Préfère le premier modèle que je t'ai donner.
++
Pluie d'étoiles sous le Curseur
