Está usted en Indice > Construcción > Lenguajes > JavaScript > Lecciones y Paso a Paso > Efectos del Ratón
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Efectos del Ratón (2)

El siguiente efecto hace que la imagen forme una estela a la que le puedes modificar el tamaño y pocas cosas más.

<html>

<head>
<title>Efecto 2</title>
<style type="text/css">
BODY {overflow: scroll; overflow-x: hidden;}
</style>
</head>

<body>
<script language="JavaScript1.2">
<!--

var largo = 12 // Largo de la estela (8 por defecto)
var ruta = "imagen2.gif" // Ubicación de la imagen

var isIE = false,isNav = false,range = "all.",style = ".style",i,d = 0
var topPix = ".pixelTop",leftPix = ".pixelLeft",imagenes,restoimg
if (document.layers) {
isNav = true,range = "layers.",style = "",topPix = ".top",leftPix = ".left"
} else if (document.all) {
isIE = true
}
function empezar() {
imagenes = new Array()
for (i = 0; i < parseInt(largo); i++) {
imagenes[i] = new Image()
imagenes[i].src = ruta
}
restoimg = new Array()
for (i = 0; i < imagenes.length*3; i++) {
restoimg[i] = 0
}
for (i = 0; i < imagenes.length; i++) {
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + imagenes[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + imagenes[i].src + '"></layer>')
}
estela()
}
function estela() {
for (i = 0; i < imagenes.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + restoimg[d])
eval("document." + range + "obj" + i + style + leftPix + "=" + restoimg[d+1])
d = d+2
}
for (i = restoimg.length; i >= 2; i--) {
restoimg[i] = restoimg[i-2]
}
d = 0
var timer = setTimeout("estela()",10)
}
function procesar(e) {
if (isIE) { // para IE
restoimg[0] = window.event.y+document.body.scrollTop+10
restoimg[1] = window.event.x+document.body.scrollLeft+10
} else { // para Netscape Navigator
restoimg[0] = e.pageY+12
restoimg[1] = e.pageX+12
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE)
}
if (isIE || isNav) {
empezar()
document.onmousemove = procesar
}
//-->
</script>

</body>
</html>



Usuarios que han visto este tema también han visto...

- Cambio de Imagen en JavaScript
- Validación formularios en Javascript
- Javascript no obstructivo, Manual de buenas maneras
- Rotar Banners con JavaScript
- Información del Navegador en JavaScript


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad






Cursos de Community Manager

Información legal | Política de Privacidad | Contacte con nosotros

Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.


Página generada el 25-05-2012 a las 22:52:02