Foros del Web - Ver Mensaje Individual - Marquesina ascendente con cualquier clase de contenido!

orochies · #1 (**permalink**) 06/02/2006, 17:36

Despues de buscar en estos foros y por muchas websno pude encontrar una maldita marquesina ascendente simplemente encontraba las famosas marquesinas de texto horizontales que se desplazan en un<input type="text"...

Pues bien intente hacerme una mia con lo poco que se de javascript y que para el resultado que eh logrado me parece algo chusco aun y poco profesional...

Por eso me dirijo a ustedes los que si saben de verdad para ver que solucion se le puede dar ya que tengo los siguientes problemas...

La marquesina no se desplaza continueamente me deja un espacio vacio tan grande como el alto del div donde esta todo el contenido, obviamente se cual es el problema eh intente resolverlo poniendole una capa que apareciera despues de la primera pero no me fue satisfactorio...

Bueno para no andar con tanta palabreria mejor les paso el codigo:

Código:

<html>
    <head>
        <title>Marquesina ascendente By orochies</title>
<script type="text/javascript">
var    cont = 300;
var tempo;
function starMarquee() {
    tempo = window.setInterval('marquee()',10);
}
function marquee() {
    window.document.getElementById('marquesina').style.top = cont+'px';
    --cont;
    if(cont == -300) {
        cont = 300;
        clearTimeout(tempo);
        starMarquee();
    }
}
function parar() {
    clearTimeout(tempo);
}
</script>
<style type="text/css">
    div#baseMarquesina {
        width: 200px;
        height: 300px;
        background-color: white;
        border: 4px outset black;
        text-align: center;
        overflow: hidden;
        position: relative;
    }
    div#marquesina {
    width: 200px;
    height: 300px;
    overflow: hidden;
    padding: 0px 15px;
    position: absolute;
    top: 300px;
    left: 0px;
}
</style>
</head>
<body onload="starMarquee();" style="margin: 0px; padding: 0px;">
<div id="baseMarquesina">
    <div id="marquesina" onmouseover="parar()" onmouseout="starMarquee()">    
        <br>
        <img src="iguana.jpg" alt="iguana">
        <br>
        <img src="iguana.jpg" alt="iguana">
        <br>
        <img src="iguana.jpg" alt="iguana">
    </div>
</div>
</body>
</html>

Tambien tiene una funcionalidad muy simple de parar el movimiento al pasar el puntero sobre la capa en movimiento...

se me olvidaba la imagen http://www.djantonioeloriginal.com/iguana.jpg

Espero que ustedes me puedan ayudar y mejorar esto estoy seguro que por allí a de aver algo mejor esto solo es algo que se me ocurrio para suplir alguna necesidad basica de emergencia jejejejej...

un saludo...