Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/05/2009, 17:55
Avatar de sonic22
sonic22
 
Fecha de Ingreso: abril-2008
Ubicación: Rosario
Mensajes: 10
Antigüedad: 16 años, 8 meses
Puntos: 0
Jquery ScrollTop, animacion con mouseover vertical

Hola,

Tengo el siguiente codigo no consigo hacer un scrollTop cuando el mouse pasa (verticalmente) por el contenedor que asocie.

Vamos por partes.

JQUERY

Código:
$('#ultimosTitulares').bind('mouseover', function(e) {
      $(this).data('ultimosTitulares', {
          element: this,
          scroll: this.scrollTop,
          y : e.clientY
        }).bind('mousemove.slider', function(e) {
          var data = $(this).data('ultimosTitulares');
          data.element.scrollTop = (data.y + e.clientY - data.scroll);
        }).bind('mouseup.slider', function(e) {
          $(this)
            .removeData('ultimosTitulares')
            .unbind('.slider');
        });

      e.preventDefault();
    });

HTML

Código PHP:
<div style="float:left; clear:right; width:auto; display:inline; margin:0 10px 0 0;">
                <div class="encabezadoCentral" style="overflow: hidden; height: 296px;">
                    <h2>Ultimos titulares</h2>
                    <div id="ultimosTitulares">
                        <ul class="slider" style="height:580px;">
                        <?php
                            
for($i=0$ultimoTitular mysql_fetch_object($ultimosTitulares); $i++){
                        
?>
                            <li><a href="entradas-<?php echo($ultimoTitular->volanta_url); ?>-<?php echo($ultimoTitular->titulo_url); ?>" title="<?php echo(stripslashes($ultimoTitular->volanta).' - '.stripslashes($ultimoTitular->titulo)); ?>"><?php echo(stripslashes($ultimoTitular->titulo)); ?></a></li>
                        <?php
                            
}
                        
?>
                        </ul>
                    </div>
                </div>
            </div>


CSS
Código:
#ultimosTitulares{
 width: 230px;
 overflow: auto;
 padding:5px 0;
 background-color:#fff;
 border-top:#ccc 1px solid;
 border-bottom:#ccc 1px solid;
 float:left;
 clear:both;
}

#ultimosTitulares  ul.slider{
 height: 580px;
 margin: 0;
 padding: 0;
}

#ultimosTitulares  ul.slider li{
	display: block;
	padding: 0;
	margin: 0;
	float: left;
	clear:both;
}

Desde ya muchas gracias por su tiempo