Weblogs Código

RecorteX

73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
asp csharp css fechas Flash html imagenes java javascript linux mysql oracle php sql SQLServer url vbnet web xhtml xml
Top Usuarios
fjmp76 (42)
albin (31)
josuebasurto (31)
juanjo (30)
pedrocaro (9)
stanz (8)
AndiXTRM (7)
Joserra (7)
miiglesi (6)
aplyca (5)
Top Etiquetas
php (38)
vbnet (28)
javascript (26)
html (25)
csharp (25)
java (24)
sql (18)
mysql (13)
xml (13)
css (10)
Flash (7)
imagenes (7)
xhtml (7)
linux (6)
fechas (6)
asp (6)
SQLServer (5)
oracle (5)
url (5)
web (5)

Mueve el scroll de una capa al pasar el ratón

Ideal para hacer un carrusel del fotos en una capa de ancho limitado, y que estas se desplacen al pasar el ratón sobre la capa.

El alto de la capa se ajustará al máximo alto de las imágenes que contenga. Estas imágenes se situarán en línea (una detrás de otra) separadas por 5 pixels.

Al pasar el ratón por la derecha o por la izquierda de la capa, se desplazará el contenido de esta para acceder a las imágenes que no aparecen en ese momento.

Código CSS necesario:
 
.st {
	position: relative; /* obligatorio */
	width : 160px;  /* ajustable */
	overflow : hidden; /* obligatorio */
}
 
Código Javascript necesario:
 
<script type="text/javascript">
window.onload = f_init;
 
var oDiv  = null;
var hInt  = null;
var nDir  = 0;
 
function f_init() {
	var nCoordX = 0;
	var nMaxH   = 0;
	var nlDivs  = document.getElementsByTagName("div");
	for(i=0; i<nlDivs.length; i++) {
		var oDiv = nlDivs[i];
		if(oDiv.className=="st") {
			oDiv.onmouseover = f_mover;
			oDiv.onmousemove = f_mmove;
			oDiv.onmouseout  = f_mout;
			oDiv.move        = f_move;
			for(ii=0; ii<oDiv.childNodes.length; ii++) {
				var oImg = nlDivs[i].childNodes[ii];
				if(oImg.tagName=="IMG") {
					oImg.style.position = "absolute";
					oImg.style.left     = nCoordX+"px";
					nCoordX += oImg.width + 5;
					nMaxH    = Math.max(nMaxH, oImg.height);
				}
			}
			oDiv.scrollLeft   = 0;
			oDiv.maxScrollW   = oDiv.scrollWidth - oDiv.offsetWidth;
			oDiv.centerX      = (oDiv.offsetWidth / 2);
			oDiv.style.height = nMaxH+"px";
		}
	}
}
function f_mover() {
	if(hInt != null) window.clearInterval(hInt);
	oDiv  = this;
	hInt  = window.setInterval(f_move, 10);
}
function f_mmove(event) {
	if(event == null) event = window.event;
	var x  = event.clientX - this.offsetLeft;
	if(x < this.centerX && this.scrollLeft>0              ) nDir = -1;
	if(x > this.centerX && this.scrollLeft<this.maxScrollW) nDir = +1;
}
function f_mout() {
	window.clearInterval(hInt);
	hInt = null;
	oDiv = null;
}
function f_move() {
	oDiv.scrollLeft += nDir;
}
 
Y código HTML de ejemplo:

<div class="st">
	<img src="imagen1.jpg" title="thumb #1" />
	<img src="imagen2.jpg" title="thumb #2" />
	<img src="imagen3.jpg" title="thumb #3" />
	<img src="imagen4.jpg" title="thumb #4" />
</div>
Identifícate para dejar un comentario.
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin