este "slider" no me funciona isabel
porque
Código Javascript
:
Ver original<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
#cont {
width: 198px;
height: 198px;
}
#capa1 {
width: 198px;
height: 198px;
background: yellow;
overflow: hidden;
}
#capa2 {
width: 198px; /* ha de ser multiplo de 3, puesto que la "iteración" es de 3 en 3 */
height: 197px;
background: red;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function() {
var contenedor = document.getElementById('cont');
if(contenedor.addEventListener) {
contenedor.addEventListener('mouseover', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 0)},false);
contenedor.addEventListener('mouseout', function() {
creaIntervalo(document.defaultView.getComputedStyl e(document.getElementById('capa2'), null).getPropertyValue('width'), document.defaultView.getComputedStyle(document.get ElementById('capa2'), null).getPropertyValue('height'), 1)},false);
} else { ie8-
contenedor.attachEvent('onmouseover', function() {
creaIntervalo(document.styleSheets[0].rules[2].style['width'], document.styleSheets[0].rules[2].style['height'], 0)
}
);
contenedor.attachEvent('onmouseout', function() {
creaIntervalo(document.styleSheets[0].rules[2].style['width'], document.styleSheets[0].rules[2].style['height'], 1)
}
);
}
}
var intervalo;
function creaIntervalo(w_bloque, h_bloque, evento) {
var bloque = document.getElementById('capa2');
var w_bloque = w_bloque;
var h_bloque = h_bloque;
if (evento == 1) {
clearTimeout(intervalo);
despliega(bloque, w_bloque, h_bloque);
} else {
clearTimeout(intervalo);
repliega(bloque, w_bloque, h_bloque);
}
}
function despliega(bloque, w, h) {
var ancho = parseInt(w);
var alto = parseInt(h);
if (ancho <= 198) {
ancho += 3;
bloque.style.width = ancho + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['width'] = ancho + 'px';
}
intervalo = setTimeout(function(){despliega(bloque, ancho, alto)}, 8);
} else if (alto <= 197) {
alto += 3;
bloque.style.height = alto + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['height'] = alto + 'px';
}
intervalo = setTimeout(function(){despliega(bloque, ancho, alto)}, 8);
} else {
clearTimeout(intervalo);
}
}
function repliega(bloque, w, h) {
var ancho = parseInt(w);
var alto = parseInt(h);
if (alto >= 30) {
alto -= 3;
bloque.style.height = alto + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['height'] = alto + 'px';
}
intervalo = setTimeout(function(){repliega(bloque, ancho, alto)}, 8);
} else if (ancho >= 3) {
ancho -= 3;
bloque.style.width = ancho + 'px';
if (document.all && parseFloat(navigator.userAgent.match(/MSIE\s\d\.\d/).toString().split(' ')[1]) < 9) { // hay que cambiar las propiedades para ie8-
document.styleSheets[0].rules[2].style['width'] = ancho + 'px';
}
intervalo = setTimeout(function(){repliega(bloque, ancho, alto)}, 8);
} else {
clearTimeout(intervalo);
}
}
</script>
</head>
<body>
<div id="cont">
<div id="capa1">
<div id="capa2"></div>
<br /><br /><br /><br />Este texto no lo habías visto<br /><br />
</div>
</div>
</body>
</html>