Foros del Web - Ver Mensaje Individual

emprear · #14 (**permalink**) 18/01/2013, 14:46

Cita:

Iniciado por IsaBelM

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: rgba(109, 106, 107, 0.85);
}


.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; /* ancho mínimo de las imágenes */
height: 28px; /* alto mínimo de las imágenes */
border: 1px solid #FFF;
z-index: auto;
}


.contenedor span.url a:hover img {
z-index: 99;
}
</style>
<script type="text/javascript">
function Evento(elemento, nomevento, fnc) {

	if (elemento.addEventListener) {
		elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
    	} else if (elemento.attachEvent) {
		elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
  	}
}


function cssComputado(obj, styleProp) {
	if (obj.currentStyle) {
		var valor = obj.currentStyle[styleProp];
	} else if (window.getComputedStyle) {
		var valor = window.getComputedStyle(obj, null)[styleProp];
	}
	return valor;
}


window.onload = function() {

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

var min_w = parseInt(cssComputado(thumb[0], 'width'));
var min_h = parseInt(cssComputado(thumb[0], 'height'));
var max_w = 90; // editable - lo máximo que se podrán expandir las imágenes a lo ancho
var max_h = 97; // editable - lo máximo que se podrán expandir las imágenes a lo alto
var velocidad  = 50; // editable - establece velocidad de despliege y repliege. cuanto menor sea la cifra más velocidad

// hack
var navegador = navigator.userAgent;
if (navegador.indexOf('Chrome') != -1 || navegador.indexOf('Firefox') != -1) { 
velocidad -= 25;
} else if (navegador.indexOf('Opera') != -1) {
velocidad -= 15;
} else if (navegador.indexOf('Safari') != -1) {
velocidad -= 40;
}
// hack


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

			Evento(thumb[i], 'mouseover', function() {this.style.zIndex = 99; transAumenta(this, min_w, min_h)});
			Evento(thumb[i], 'mouseout', function() {clearTimeout(intervalo); this.style.border = "1px solid #FFF"; transDisminuye(this, parseInt(this.style.width), parseInt(this.style.height))});

	}



var intervalo;

function transAumenta(bloque, ancho, alto) {

	if (ancho < max_w) {

		ancho = Math.ceil(ancho + ((max_w - ancho) / velocidad));
		bloque.style.width = ancho + 'px';
		intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 1);

	} else if (alto <= max_h) {

		alto = Math.ceil(alto + ((max_h - alto) / velocidad));
		bloque.style.height = alto + 'px';
		intervalo = setTimeout(function(){transAumenta(bloque, ancho, alto)}, 1);
	} 
}



function transDisminuye(bloque, ancho, alto) {

	if (alto > min_h) {

		alto -= Math.ceil((alto - min_h) / velocidad);
		bloque.style.height = alto + 'px';
		setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 1);

	} else if (ancho > min_w) {

		ancho -= Math.ceil((ancho - min_w) / velocidad);
		bloque.style.width = ancho + 'px';
		setTimeout(function(){transDisminuye(bloque, ancho, alto)}, 1);

	} else {

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


};
</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>

<!-- ignorar -->
<script type="text/javascript">
//<![CDATA[
var browserList = { //Indicar compatibilidad si fué probada 1=compatible
'Firefox':1,
'IE8':1,
'IE9':1,
'Chrome':1,
'Opera':1,
'Safari(win)':1
},
// no modificar desde aquí
result = ''; for(var browser in browserList) {result += browserList[browser] === 1 ? browser + ' ' : '';};
//]]>
</script>
<script type="text/javascript" src="code/pie.js"></script>
<!-- ignorar -->

</body>
</html>

Subido bajo el nombre de "Miniaturas escalabales"
https://googledrive.com/host/0B5cDQ-...scalables.html

Saludos