capas

davidmr10 · #1 (**permalink**) 24/03/2010, 10:39

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "xhtml1-transitional.dtd">
<html>
<head>
<title>Prueba</title>
<style type="text/css">
  /*
   * Capas
   */
   
  /* Contenedor del texto */
  #contenedor {
    width: 340px;
    height: 427px;
    position: relative;
    overflow: hidden;
    font-size: 12px;
    white-space: pre;
  }
  
  /* Contenedor de la miniatura */
  #miniatura {
    font-size: 4px;
    position: absolute;
    top: 4px;
    left: 360px;
    width: 92px;
    cursor: crosshair;
    border: 2px solid #009090;
    white-space: pre;
    background: #999999;
  }
 
  /* Ventanita que muestra que es lo que se está mostrando */
  #ventana {
    position: absolute;
    top: 0px;
    background: #EEEEEE;
    width: 100%;
  }
  
  /* Contenedor del texto de la miniatura */
  #contenedor-texto {
    position: absolute;
    width: 92px;
    z-index: 2;
  }  
 
  /* Capa que evita que se pulse en la miniatura */
  #tapa {
    position: absolute;
    background: url(sp.gif);
    width: 100%;
    height: 100%;
    z-index: 4;
  }
 
  pre {
     font-family: Arial;
    margin: 0px;
  }
</style>
<script type="text/javascript">
//<![CDATA[
  var altoTot = 427;  // Alto de las ventanas
  var altoVtn = 135;  // Alto de la ventanita que 
                      // indica que es lo que se muestra
  var anchoTot = 400;  // Ancho de la ventana del texto
  var anchoVtn = 92;  // Ancho de la ventanita que 
                      // indica que es lo que se muestra
  var movimiento = false;  // Si se debe mover
  var desp = 0;  // Desplazamiento que hay que 
                 // tener en cuenta cuando se 
                 // pincha dentro de la ventanita
  
 
  // Devuelve el valor numerico de una 
  // propiedad de los estilos (elimina el px)
  function valorCSS(obj, tipo) {
    var aux = eval("parseFloat(obj.style." + tipo + 
      ".substring(0,obj.style." + tipo + ".length-2))");
    return aux;
  }
  
  // Empieza o finaliza el movimiento
  // de la ventanita
  function estadoScrolling(evt, obj, ok) {
    movimiento = ok;
 
    // Si hay movimiento, hay que tener
    // en cuenta si se ha pinchado dentro
    // de la ventanita, si es así, se toma
    // la distancia desde el ratón hasta el "top"
    // de la ventanita, para luego sumar esa distancia
    if (ok) {
      var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox;
      var vtn = document.getElementById("ventana");
      
      if (y < valorCSS(vtn, "top") || 
          y > valorCSS(vtn, "top")+altoVtn) {
        // si se ha pulsado fuera se 
        // desplaza a la posición y se
        // toma como desplazamiento = 0
        scrollingCapa(evt, obj);
        desp = 0;
      } else {
        // si se ha pulsado dentro se
        // toma la longitud del desplazamiento
        desp = y - valorCSS(vtn, "top");
      }
    }
  }
  
  
  // Mueve la ventanita según la posición del ratón
  // y desplaza (scrolling) el texto
  function scrollingCapa(evt, obj) {
    if (movimiento) {
      var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox;
      
      // Ventana que contiene el texto
      var orig = document.getElementById("contenedor");
      // Alto total del contenedor del texto
      var alto = orig.scrollHeight;
  
      // Scrolling del texto
      orig.scrollTop = (alto*(y-desp)/obj.offsetHeight)-10;
 
      // Movimiento de la ventana
      var vtn = document.getElementById("ventana");
      var pos = parseInt(y-desp) > altoTot-altoVtn? 
                 altoTot-altoVtn : 
                 y-desp-2;
      pos = pos < 0? 0: pos;
      vtn.style.top = pos+"px";
    }
  }
  
  
  // Crea la miniatura segun el texto
  // del contenedor
  function creaMiniatura() {
    // Contenedor del texto
    var orig = document.getElementById("contenedor");
    // Contenedor de la miniatura
    var mini = document.getElementById("miniatura");
    
    // Inicializo la posición del scroll para cuando se haga refresh
    orig.scrollTop = "0px"; 
    // Se oculta la miniatura hasta que acabe
    mini.style.display = "none";
    
    // La miniatura está formada por 3 capas: 
    // 1. la ventanita que indica que se está mostrando
    // 2. el texto
    // 3. una tapadera para evitar que se seleccione el texto
    mini.innerHTML = '<div id="ventana"></div><div id="contenedor-texto">'+orig.innerHTML+'</div><div id="tapa"></div>';
    
    // Inicialización de valores
    mini.style.height = altoTot+"px";
    document.getElementById("contenedor-texto").style.height = altoTot+"px";
    document.getElementById("ventana").style.height = altoVtn+"px";
    document.getElementById("ventana").style.top = "0px";
    
    // Se cogen todas las imagenes (que deben tener su 
    // alto y ancho fijados) y se redimensionan para que
    // tengan un tamaño proporcional
    var imgs = mini.getElementsByTagName("IMG");
    
    var alto = orig.scrollHeight;
    var porc = anchoVtn/anchoTot;
    
    for (var i=0; i<imgs.length; i++) {
      imgs[i].style.width = (porc*valorCSS(imgs[i], "width"))+"px";
      imgs[i].style.height = (porc*valorCSS(imgs[i], "height"))+"px";
    }
    
    // Se muestra la miniatura
    mini.style.display = "block";
  }
//]]>  
</script>
</head>
<body onload="creaMiniatura()">
<div id="contenedor"><pre>
 
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="logo_cbtech.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="logo_cbtech.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
 
 
</pre></div>
 
<div id="miniatura" onmousedown="estadoScrolling(event, this, true)" onmouseup="estadoScrolling(event, this, false)" onmousemove="scrollingCapa(event, this)">
</div>
</body>
</html>

este es un codigo muy bueno, pero me gustaria saber como puedo hacer para que el scroll sea de forma horizontal.

ayuda

caricatos · #2 (**permalink**) 24/03/2010, 11:25

Hola:

La forma de conseguir un scroll horizontal es que haya una capa contenedora con dimensiones fijas (anchura x altura) y otra con el contenido de una altura igual (o preferentemente algo menor), y una anchura superior... para usar capas, deberían estar con posicionamiento absoluto con el mismo valor para el estilo top (0px) y los atributos left iguales a los acumulados de las anchuras de las capas anteriores.

Saludos