| Sección
"Java Scripts" |
|
Lección
61 |
Efecto
zamba en el cursor
Este
Script hace que un efecto zamba rodeee al cursor, para
activarlo, pegas este código en cualquier
sector de tu sitio, pero siempre debajo de donde
dice <Head> en el HTML de tu página:
<LAYER NAME="a0" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a1" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a2" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a3" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a4" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a5" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF00FF" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a6" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,1,1">
</LAYER>
<LAYER NAME="a7" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a8" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a9" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a10" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a11" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a12" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#0000ff" CLIP="0,0,2,2">
</LAYER>
<LAYER NAME="a13" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,3,3">
</LAYER> |
|
Lo
que pinté con rojo es el texto que seguirá al
cursor, lo modificas a gusto.
Y
esto
otro pegas en <Body>
en el HTML de tu página: (recuerda que para pegar
este código debes borrar la etiqueta <Body>
y colocar esto en reemplazo)
<div id="starsDiv" style="position:absolute;top:0px;left:0px"><div
style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div><div
style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div><div
style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div><div
style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div></div><script
LANGUAGE="JavaScript">
<!-- Begin
var Clrs = new Array(6);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var Xs = 200;
var Ys = 400;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
if (document.all) {
function MoveHandler() {
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function Comet() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
step = 3;
starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai < Clrs.length; ai++) {
var c=Math.round(Math.random()*[ai]);
}
starsDiv.all[i].style.background = Clrs[c];
}
}
else if (document.layers) {
for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers!
step = 6;
var templayer = "a"+j;
document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
for (aj=0; aj < Clrs.length; aj++)
{
var c=Math.round(Math.random()*[aj]);
}
document.layers[templayer].bgColor = Clrs[c];
}
}
currStep += step;
setTimeout("Comet()", 5);
}
Comet();
// End -->
</script>
<p align="center"> </p> |
Y
aquí lo tienes al mismo archivo, listo para
cortar y pegar en tu página:
Para
ello haces click en cualquier palabra que se halla
dentro de la caja, Te diriges a "Edición"
en el menú superior de la barra de herramientas,
e indicas "Seleccionar todo", luego tomas
lo seleccionado dirigiéndote nuevamente a
"Edición", pero esta vez indicas
"Cortar", y posteriormente te posicionas
en tu página, donde quieres colocar este código,
entonces te diriges a Edición, y le indicas
"Pegar".
Si
deseas hacer las cosas más rápido, puedes
verificar en "Edición" (está escrito
al lado de las palabras que indican cada orden)
que pulsando "Control" + una letra
determinada, puedes "seleccionar todo",
"cortar" o "pegar" en forma
instantánea y con eso evitas tener que ingresar
constantemente al menú de "Edición".
Esto
es lo que debes pegar debajo de donde dice <Head>
en el HTML de tu página:
Esto
es lo que debes pegar debajo de donde dice <Body>
en el HTML de tu página:
|
