Ver Mensaje Individual
  #13 (permalink)  
Antiguo 07/12/2010, 15:48
Avatar de rzkgraphics
rzkgraphics
 
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: ayuda con marquee

Cita:
Iniciado por furoya Ver Mensaje
Sí, el tiempo siempre atenta contra la calidad. Igual el tema sirvió para poner varios ejemplos desarmables y estudiables.

Es más, vuelvo acá porque me parece que es el lugar ideal para responder a una objeción que me hicieron por otro efecto que está en

[url=http://www.forosdelweb.com/f13/reloj-digital-javascript-ke-funcione-mozilla-301410/#post3633809] reloj digital en javascript ke funcione en mozilla[/url] #19.

Allí puse un texto (podía ser cualquier elemento) que simulaba un 'rebote' en las paredes del contenedor, como una marquesina alternate, pero en "diagonal" (digo, para que se entienda el movimiento).
Está hecho con javascript, y le agregué un cambio de colores aleatorios cada vez que pegaba contra uno de los lados.

Como además expliqué que eso venía de otro sitio donde puse versiones hechas realmente con marquee, lo que me terminaron planteando —no en un foro, sino personalmente— es que ese tipo de 'rebote' no se hace con marquesinas, porque no tiene ningún atributo para desplazarse "a 45°". Lo que es totalmente cierto. Pero no significa que no se pueda hacer. El truco es viejísimo.

El siguiente ejemplo solamente usa JS para el cambio de colores, donde aprovecho el evento onbounce, que sí es de marquee. Lo demás es HTML.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>REBOTE Y COLORES AL AZAR.</title>
<script type="text/javascript">
var paleta = new Array();
paleta[0] = ["maroon", "fuchsia", "lime", "aqua", "red"];
paleta[1] = ["fuchsia", "maroon", "olive", "aqua", "teal"];
paleta[2] = ["lime", "blue", "navy", "purple", "maroon"];
paleta[3] = ["aqua", "teal", "red", "maroon", "purple"];
paleta[4] = ["red", "teal", "navy", "purple", "olive"];
paleta[5] = ["navy", "lime", "red", "aqua", "fuchsia"];

function colores() {
var fnd0 = Math.floor(Math.random()*6);
var fnd1 = Math.ceil(Math.random()*4);

document.getElementById("horizontal").style.backgroundColor = paleta[fnd0][0];
document.getElementById("rebota").style.backgroundColor = paleta[fnd0][fnd1];

}
</script>
<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " onbounce="colores()">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px; " onbounce="colores()"> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Cambia colores en forma aleatoria con cada rebote.</p>
</body>
</html>
El problema con los eventos es que ya no son tan compatibles. En Chrome y Opera, por ejemplo, no lo pude hacer andar, solamente 'rebota' y no cambia de color.

Si no se entiende la animación, por las dudas, acá dejo otra versión más limpia y con capas destacadas.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">
body {background-color: black; color: white; text-align:center; }
h2, p {text-align: left;}
</style>
</head>
<body>
<h2>Imagen que rebota con marquesinas.</h2>

<marquee id="horizontal" direction="right" 
behavior="alternate" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:600px; 
background-color: white; " title="Marquee horizontal.">
<marquee id="vertical" direction="up" behavior="alternate" 
align="down" scrollamount="5" scrolldelay="20" 
style="height: 300px; width:150px;" onclick="this.style.backgroundColor='lime'" title="Marquee vertical."> 
<img style="width:150px; height:150px; background-color: #0000ff;" id="rebota"
src="http://static.forosdelweb.com/fdwtheme/fdw-foco-1.png" 
>
</marquee> </marquee>

<p>Haciendo un click sobre la imagen se ven los límites de ambas marquesinas.</p>
</body>
</html>
Ahora sí. El tema ya quedó un poco más completo.
(: Justo un poco de la ayuda que necesito!

Hola a todos, bueno me hice un visor simple y chico para pasar unas imágenes, pero tengo algo que quisiera mejorar, y es que quisiera que las imágenes del comienzo y el final no dejen un espacio en blanco, es decir que sigan pasando juntas y repitiendose como lo hacen, pero sin ese espacio que deja al terminar de pasar la última imagen.

Código HTML:
<marquee height="101" width="590" onmouseover="this.scrollAmount='0'" scrollamount="5" onmouseout="this.scrollAmount='5'">
<a href="http://www.twitter.com/djkevinperu"><img src="http://rzkgraphics.webcindario.com/images/minibanner/3sc.gif" width="589" height="101" border="0"/></a>
<a href="http://www.twitter.com/djkevinperu"><img src="http://rzkgraphics.webcindario.com/images/minibanner/3sc.gif" width="589" height="101" border="0"/></a>
</marquee>