Hola:
Hacía tiempo que quería hacer ese efecto, y aproveché la ocasión para ponerme el mameluco...
Código:
<html>
<head>
<title>
efecto
</title>
<script type="text/javascript">
var tam1 = 100;
var tam2 = 0;
function transitar() {
if (tam1 > 0) {
tam1--; tam2++;
document.images.img1.style.width = tam1 + "%";
document.images.img1.style.left = (100 - tam1) + "%";
document.images.img2.style.width = tam2 + "%";
document.images.img2.style.left = (100 - tam2) + "%";
setTimeout("transitar()", 10);
}
else {
tmp = document.images.img2.src;
tam1 = 100; tam2 = 0;
document.images.img2.src = document.images.img1.src;
document.images.img1.style.width = tam1 + "%";
document.images.img1.style.left = "0%";
document.images.img2.style.width = tam2 + "%";
document.images.img2.style.left = "0%";
document.images.img1.src = tmp;
setTimeout("transitar()", 1000);
}
}
</script>
</head>
<body onload="transitar()">
<div id="efecto" style="width: 133px; height: 100px; position:relative">
<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg"
style="width: 100%; height: 100%; position: absolute; top: 0; left: 0%"
name="img1" />
<img src="http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg"
style="width: 0%; height: 100%; position: abolute; top: 0; left: 0%" name="img2" />
</div>
</body>
</html>
Funciona en los 3 navegadores, aunque en firefox noté un parpadeo
Sobre los efectos, puedes copiar de la página lo que quieras.
Saludos
