Estela en el puntero del mouse
Pequeña estela en el puntero del mouse
En este artículo veremos un código JavaScript que
permite incluir una pequeña estela siguiendo al puntero del mouse.
Copia el siguiente script entre las etiquetas <body>
y </body>:
<script language="JavaScript">
<!-- Mouse Comet II script by kurt.grigg@virgin.net
colours=new
Array('#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF')
n = 10;
y = 0;
x = 0;
n6=(document.getElementById&&!document.all);
ns=(document.layers);
ie=(document.all);
d=(ns||ie)?'document.':'document.getElementById("';
a=(ns||n6)?'':'all.';
n6r=(n6)?'")':'';
s=(ns)?'':'.style';
if (ns){
for (i = 0; i < n; i++)
document.write('<layer name="dots'+i+'" top=0 left=0 width='+i/2+'
height='+i/2+' bgcolor=#ff0000></layer>');
}
if (ie)
document.write('<div id="con"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
if (ie||n6){
for (i = 0; i < n; i++)
document.write('<div id="dots'+i+'"
style="position:absolute; top:0px; left:0px; width:'+i/2+'px; height:'+i/2+'px; background:#ff0000; font-size:'+i/2+'"></div>');
}
if (ie)
document.write('</div></div>');
(ns||n6)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
y = (ns||n6)?evnt.pageY+4 - window.pageYOffset:event.y+4;
x = (ns||n6)?evnt.pageX+1:event.x+1;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function animate(){
o=(ns||n6)?window.pageYOffset:0;
if (ie)con.style.top=document.body.scrollTop;
for (i = 0; i < n; i++){
var temp1 = eval(d+a+"dots"+i+n6r+s);
randcolours = colours[Math.floor(Math.random()*colours.length)];
(ns)?temp1.bgColor = randcolours:temp1.background = randcolours;
if (i < n-1){
var temp2 = eval(d+a+"dots"+(i+1)+n6r+s);
temp1.top = parseInt(temp2.top);
temp1.left = parseInt(temp2.left);
}
else{
temp1.top = y+o;
temp1.left = x;
}
}
setTimeout("animate()",10);
}
animate();
// -->
</script>
Dentro del vector colours se almacenan
los colores de las diferentes posiciones de la estela, los cuales pueden ser
modificados a gusto propio.
colours=new Array('#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF', '#6699FF')
|
