Foros del Web - Ver Mensaje Individual

MARCASTELEON · #3 (**permalink**) 04/02/2012, 12:55

Hola, te dejo este ejemplo completo

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=utf-8" />
<title>Documento sin título</title>
 
<script>
//configuracion
desplazamiento={
paso:5,//cantidad de pixeles que desplaza el contenido por vez
eje:"x",//eje en el que se va a realizar el desplazamiento(y ó x)
idIzqArr:"la",//id del objeto que activa el desplazamiento hacia la izquierda o arriba
idDerAba:"ra",//id del objeto que activa el desplazamiento hacia la derecha o abajo
idObj:"menu",//id del elemento que va a ser desplazado
    }
 
window.onload=function(){
document.getElementById(desplazamiento.idIzqArr).onclick=desplazar;
document.getElementById(desplazamiento.idDerAba).onclick=desplazar; }
                        
function desplazar(){
var obj=document.getElementById(desplazamiento.idObj);
(desplazamiento.eje=="x")?obj.scrollLeft+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso:obj.scrollTop+=(this.id==desplazamiento.idIzqArr)?desplazamiento.paso*-1:desplazamiento.paso; }
 
</script>
 
 
<style>
 
.a{ float:left; margin:0px 5px; cursor:pointer;}
 
#menu{ float:left; width:50px; height:20px; background-color:#CCCCCC; overflow:hidden;}
 
#elementos{ width:105px;; list-style:none; margin:0px; padding:0px;}
 
#elementos li{ display:inline;}
 
</style>
 
 
</head>
 
 
 
<body>
 
<div id="la" class="a">&lt;</div>
<div id="menu">
    <ul id="elementos">
       <li>
         <a href="#">1</a>
       </li>
       <li>
         <a href="#">2</a>
       </li>
       <li>
         <a href="#">3</a>
       </li>
       <li>
         <a href="#">4</a>
       </li>
       <li>
         <a href="#">5</a>
       </li>
       <li>
         <a href="#">6</a>
       </li>
       <li>
         <a href="#">7</a>
       </li>
       <li>
         <a href="#">8</a>
       </li>
       <li>
         <a href="#">9</a>
       </li>
       <li>
         <a href="#">10</a>
       </li>
       <li>
         <a href="#">11</a>
       </li>
       <li>
         <a href="#">12</a>
       </li>
       <li>
         <a href="#">13</a>
       </li>
       <li>
         <a href="#">14</a>
       </li>
       <li>
         <a href="#">15</a>
       </li>
       <li>
         <a href="#">16</a>
       </li>
       <li>
         <a href="#">17</a>
       </li>
       <li>
         <a href="#">18</a>
       </li>
    </ul>
</div>
<div id="ra" class="a">&gt;</div>
 
</body>
</html>

al darle click a las flechas mueve la distancia indicada por "paso" una vez, tambien hay algunas opciones(configuracion). Si necesitas mas ayuda o tienes preguntas sobre el codigo no dudes en preguntar.

puedes dar una vista previa http://jsfiddle.net/MARCASTELEON/gxe2R/1/