Ver Mensaje Individual
  #4 (permalink)  
Antiguo 09/04/2009, 09:27
Avatar de Panino5001
Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 9 meses
Puntos: 834
Respuesta: div con scroll horizontal

No sé si te entiendo bien. Fijate si esto te sirve:
Código PHP:
<!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>test</title>
<
style>
#contenedor{ width:400px; height:50px; overflow:hidden; position:relative; border:1px dashed #000}
#sub{position:absolute;}
#sub div{ position:absolute; top:15px; width:100px; text-align:center}
form{display:inline}
inputheight:20pxfont-size:10pxwidth:100pxline-height:20pxmargin:0width:80px}
</
style>
<
script>
function $(
x){return document.getElementById(x);}
function 
estilo(obj,w3c,IE){
    if(
window.getComputedStyle){
    return 
parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue(w3c));
    }else{
        return 
parseInt(obj.currentStyle[IE]);
    }
}
onload=function(){
    
    var 
bots=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
    for(var 
i=0,bot;bot=bots[i];i++){
        var 
t=$('clon').cloneNode('true');
        
t.style.left=i*estilo($('clon'),'width','width')+'px';
        
t.firstChild.value=bot;
        (function(
i,t){
            
t.firstChild.onclick=function(){
                $(
'sub').style.left=estilo($('contenedor'),'width','width')/2-estilo(t,'width','width')*(i+1)+estilo(t,'width','width')/2+'px';
            }
        })(
i,t);
        $(
'sub').appendChild(t);
    }
}
</script>
</head>

<body>


<form id="form1" name="form1" method="post" action="">
<div id="contenedor">
<div id="sub">
  <div id="clon"><input type="button" value="algo" /></div>
</div>
</div>
</form>
</body>
</html> 
O un poco más animado:
Código PHP:
<!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>test</title>
<
style>
#contenedor{ width:400px; height:50px; overflow:hidden; position:relative; border:1px dashed #000}
#sub{position:absolute;}
#sub div{ position:absolute; width:100px; text-align:center; background-color:#FFFFFF}
form{display:inline}
#bot{font-size:10px; width:100px;  margin:0; width:80px; margin-top:10px; background-color:#CCC; height:30px; line-height:30px; cursor:pointer}
</style>
<
script>
function $(
x){return document.getElementById(x);}
function 
estilo(obj,w3c,IE){
    if(
window.getComputedStyle){
        return 
parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue(w3c));
    }else{
        return 
parseInt(obj.currentStyle[IE]);
    }
}

function 
transicion(curva,ms,callback){
    
this.ant=0.01;
    
this.done_=false;
    var 
_this=this;
    
this.start=new Date().getTime();
    
this.init=function(){
        
setTimeout(function(){
                if(!
_this.next()){
                    
callback(1);
                    
_this.done_=true;
                    
window.globalIntervalo=0;
                    return;
                }
                
callback(_this.next());
                
_this.init();
            },
13);
    }
    
this.next=function(){
        var 
now=new Date().getTime();
        if((
now-this.start)>ms)
            return 
false;
        return 
this.ant=curva((now-this.start+.001)/ms,this.ant);
    }
}

function 
fx(obj,inicio,fin,propCss,u,curva,ms,cola){
    if(!
window.globalIntervalo)
        
window.globalIntervalo=1;
    else {
        if(
cola)
            return 
setTimeout(function(){fx(obj,inicio,fin,propCss,u,curva,ms,cola);},30);
        else
            return;
    }    
    var 
t=new transicion(curva,ms,function(p){
        if(
fin<inicio){
            var 
delta=inicio-fin;
            
obj.style[propCss]=(inicio-(p*delta))+u;
        }
        else{
            var 
delta=fin-inicio;
            
obj.style[propCss]=(inicio+(p*delta))+u;
        }
    });
    
t.init();
    
t=null;
}
function 
senoidal(p,ant){
    return (
Math.cos(Math.PI)) / 2;

onload=function(){
    var 
bots=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
    for(var 
i=0,bot;bot=bots[i];i++){
        var 
t=$('clon').cloneNode('true');
        
t.style.left=i*estilo($('clon'),'width','width')+'px';
        
t.firstChild.innerHTML=bot;
        (function(
i,t){
            
t.firstChild.onclick=function(){
            for(var 
ii=0,el=$('sub').getElementsByTagName('p');el[ii];ii++)
                
el[ii].style.backgroundColor='#CCC';
            
this.style.backgroundColor='red';
            var 
obj=$('sub');
            var 
inicio=isNaN (parseInt($('sub').style.left))?0:parseInt($('sub').style.left);
            var 
fin=estilo($('contenedor'),'width','width')/2-estilo(t,'width','width')*(i+1)+estilo(t,'width','width')/2;
            
fx(obj,inicio,fin,'left','px',senoidal,500,true);
                
            }
        })(
i,t);
        $(
'sub').appendChild(t);
    }
    $(
'sub').removeChild($('clon'));
}
</script>
</head>

<body>


<div id="contenedor">
<div id="sub">
  <div id="clon"><p id="bot">sss</p></div>
</div>
</div>
</body>
</html> 

Última edición por Panino5001; 09/04/2009 a las 11:56