Foros del Web - Ver Mensaje Individual

IsaBelM · #13 (**permalink**) 18/01/2013, 06:16

Transiciones ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:

<!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>Transición de Imágenes</title>
<style type="text/css">
* {
margin: 0; 
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}


body {
background-color: rgb(109, 106, 107);
}


.contenedor {
width: 160px;
height: 30px; /* height + border de .contenedor span.url a img */
margin: 0 auto;
padding-top: 50px;
}



.contenedor span {
float:left;
}


.contenedor span.url {
width: 26px; /* mismo ancho que en .contenedor span.url a img */
height: 28px; /* mismo alto que en .contenedor span.url a img */
margin: 0 7px;
}


.contenedor span.url a img {
width: 26px; /* editable - ancho mínimo de las imágenes */
height: 28px; /* editable - alto mínimo de las imágenes */
max-width: 90px; /* editable - ancho máximo de las imágenes */
max-height: 97px; /* editable - alto máximo de las imágenes */
border: 1px solid #FFF;
}
</style>
<script type="text/javascript">
var lib = {

Evento : function(elemento, nomevento, fnc) {

	if (elemento.addEventListener) {

		elemento.addEventListener(nomevento, fnc, false);

    	} else if (elemento.attachEvent) {

		elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});

  	}
},


cssComputado : function(obj, styleProp) {

	if (obj.currentStyle) {

		var valor = obj.currentStyle[styleProp];

	} else if (window.getComputedStyle) {

		var valor = window.getComputedStyle(obj, null)[styleProp];
	}

	return valor;
},


intervalo : 0,
min_w : 0,
vmin_h : 0,
vmax_w : 0,
max_h : 0,

tiempo : 300 // editable - duración del efecto

};





function inicia() {

var thumb = document.querySelector('.contenedor').getElementsByTagName('img');

lib.min_w = parseInt(lib.cssComputado(thumb[0], 'width'));
lib.min_h = parseInt(lib.cssComputado(thumb[0], 'height'));
lib.max_w = parseInt(lib.cssComputado(thumb[0], 'max-width'));
lib.max_h = parseInt(lib.cssComputado(thumb[0], 'max-height'));

	for (var i = 0; i < thumb.length; i++) {

		lib.Evento(thumb[i], 'mouseover', function() {this.style.zIndex = 99; transAumenta(this, lib.min_w, lib.min_h, new Date().getTime(), lib.tiempo)});
		lib.Evento(thumb[i], 'mouseout', function() {clearTimeout(lib.intervalo); transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height), new Date().getTime(), lib.tiempo)});

	}

}




function transAumenta(bloque, ancho, alto, tEmpieza, milisegundos) {

var tDuracion =  parseInt(milisegundos/2, 10);
var ahora = new Date().getTime();

	if (ancho < lib.max_w) {
		
		if ((ahora - tEmpieza) < tDuracion) {
			var avance = ((ahora - tEmpieza) / tDuracion);
			var anc = ancho + ((lib.max_w - ancho) * avance);
			bloque.style.width = anc + 'px';
			lib.intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto, tEmpieza, milisegundos)}, 1);

		} else {

			var avance = 1;
			var anc = ancho + ((lib.max_w - ancho) * avance);
			bloque.style.width = anc + 'px';
			lib.intervalo = setTimeout(function(){transAumenta(bloque, anc, alto, new Date().getTime(), milisegundos)}, 1);
		}

		
	} else if (alto < lib.max_h) {

		if ((ahora - tEmpieza) < tDuracion) {
			var avance = ((ahora - tEmpieza) / tDuracion);
			var al = alto + ((lib.max_h - alto) * avance);
			bloque.style.height = al + 'px';
			lib.intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto, tEmpieza, milisegundos)}, 1);

		} else {

			var avance = 1;
			var al = alto + ((lib.max_h - alto) * avance);
			bloque.style.height = al + 'px';
			lib.intervalo = setTimeout(function(){transAumenta(bloque, ancho, al, tEmpieza, milisegundos)}, 1);
		}
	}

}




function transDisminuye(bloque, ancho, alto, tEmpieza, milisegundos) {

var tDuracion =  parseInt(milisegundos/2, 10);
var ahora = new Date().getTime();

	if (alto > lib.min_h) {

		if ((ahora - tEmpieza) < tDuracion) {
			var avance = ((ahora - tEmpieza) / tDuracion);
			var al = alto - ((alto - lib.min_h) * avance);
			bloque.style.height = al + 'px';
			setTimeout(function(){transDisminuye(bloque, ancho, alto, tEmpieza, milisegundos)}, 1);

		} else {

			var avance = 1;
			var al = alto - ((alto - lib.min_h) * avance);
			bloque.style.height = al + 'px';
			setTimeout(function(){transDisminuye(bloque, ancho, al, new Date().getTime(), milisegundos)}, 1);
		}


	} else if (ancho > lib.min_w) {
		
		if ((ahora - tEmpieza) < tDuracion) {
			var avance = ((ahora - tEmpieza) / tDuracion);
			var anc = ancho - ((ancho - lib.min_w) * avance);
			bloque.style.width = anc + 'px';
			setTimeout(function(){transDisminuye(bloque, ancho, alto, tEmpieza, milisegundos)}, 1);

		} else {

			var avance = 1;
			var anc = ancho - ((ancho - lib.min_w) * avance);
			bloque.style.width = anc + 'px';
			setTimeout(function(){transDisminuye(bloque, anc, alto, tEmpieza, milisegundos)}, 1);
		}


	} else {

		bloque.style.zIndex = 'auto';
	}
}


lib.Evento(window, 'load', inicia);
</script>
</head>
<body>

<div class="contenedor">
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim01t.jpg" title="i1" alt="i1"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim02t.jpg" title="i2" alt="i2"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim03t.jpg" title="i3" alt="i3"></a></span>
<span class="url"><a href="" target="_blank"><img src="http://r0k.us/graphics/kodak/thumbs/kodim05t.jpg" title="i4" alt="i4"></a></span>
</div>

</body>
</html>