Foros del Web - Ver Mensaje Individual

dART · #14 (**permalink**) 01/05/2009, 12:21

Hola,

Te paso el código que yo uso para las marquesinas en AJAX:

Código .html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" language="javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" language="javascript" src="js/marquesina.js"></script>
<link rel="stylesheet" type="text/css" href="css/marquesina.css" />
</head>
<body>
<div id="marquesina">
    <div class="headline">
        contenido1 de la marquesina </div>
    <div class="headline">
        contenido2 de la marquesina </div>
    <div class="headline">
        contenido3 de la marquesina </div>
</div>
</body>
</html>

Código js/marquesina.js:

Ver originalvar headline_count;
    var headline_interval;
    var old_headline = 0;
    var current_headline = 0;
     
    $(document).ready(function(){
        headline_count = $("div.headline").size();
        $("div.headline:eq("+current_headline+")").css('top','5px');
        headline_interval = setInterval(headline_rotate, 3000); // tiempo en milisegundos
        $('#marquesina').hover(function() {
            clearInterval(headline_interval);
        }, function() {
            headline_interval = setInterval(headline_rotate, 3000); // tiempo en milisegundos
            headline_rotate();
        });
    });
    
    function headline_rotate() {
        current_headline = (old_headline + 1) % headline_count; 
        $("div.headline:eq(" + old_headline + ")").animate({top: -80},"slow", function() {
            $(this).css('top','80px');
        });
        $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
        old_headline = current_headline;
    }

Código css/marquesina.css:

Ver original#marquesina{
        position: relative;
        overflow: hidden;
        height: 50px;
        width: 220px;
        color:#77A055;
    }
     
    .headline{
        position:absolute;
        top: 200px;
        height:45px;
        _left: 0px;
        width:220px;
        _width: 99%;
        text-align:justify;
        cursor:pointer;
    }
    
    .headline:hover{
        color:#A25360;
    }

Y por último, como puedes ver en el .html, incluyo el jquery versión 1.2.6 que puedes descargarlo desde el sitio oficial jquery.com

Saludos, espero que sirva ;)