/** * script basado en uno analogo encontrado en webreference (www.webreference.com) */ /*Cambio MCUH1 para poder incluir el javascript en el head y no en el body: - crear nueva función deslizar_init que incluya la creación del objeto ocapa y sus funciones - usar nueva función deslizar_addEvent para ejecutar deslizar_init en onload Cambio MCUH2 para evitar la incompatibilidad con la definición del DOCTYPE strict o transitional en la página en IE y FF Cambio MCUH3: definición de parámetros de configuración al principio del código Cambio MCUH4: cambio de parámetros */ /*PARTE MODIFICABLE*********************************/ //MCUH3 //MCUH4var _topMargin = 350; //posicion inicial superior de la capa deslizante. ¡ SINCRONIZADO con el valor top definido en el style de la capa ! var _topMargin = 250; //posicion inicial superior de la capa deslizante. ¡ SINCRONIZADO con el valor 'top' definido en el style de la capa ! var _ceiling = 55; //pixels que se escrolea la capa con amortiguacion var _desplazaTime = 10000; //tiempo que tarda la capa en recorrer el espacio marcado por ceiling var _interval = 35; //temporizacion del movimiento de la capa //MCUH4var _yCorrection = 300; //influye en el margen superior que tendrá la capa tras el movimiento var _yCorrection = 100; //influye en el margen superior que tendrá la capa tras el movimiento /*****************************************************/ //MCUH1 var ocapa; deslizar_addEvent(window,"load",deslizar_init); /*MCUH1 creación del objeto con sus funciones dentro de nueva función deslizar_init */ function deslizar_init() { /** * definimos un objeto ocapa y sus propiedades. Observa como de define un nuevo objeto, mediante * un signo igual para abrir el parentesis de sus propiedades y mediante : para definir cada una de ellas * var topMargin = posicion inicial superior de la capa deslizante * var ceiling = pixels que se escrolea la capa con amortiguacion * var desplazaTime = tiempo que tarda la capa en recorrer el espacio marcado por ceiling * En la ultima sentencia de declaracion asignamos un valor diferente a capaDiv para cada navegador */ ocapa = { topMargin : _topMargin, ceiling : _ceiling, desplazaTime : _desplazaTime, capaDiv : document.all ? document.all.capa : //sigue en la siguiente linea (document.layers ? document.capa : document.getElementById('capa')) } /** * llamamos a la funcion ocapa.coordenadas cada 35 milisegundos */ window.setInterval("ocapa.coordenadas( )", _interval) /** * definimos la funcion ocapa.coordenadas, metodo del objeto ocapa, que obtiene en cada paso * las coordenadas de la capa y de la ventana scroleada * observa como se define un metodo propio de un objeto, mediante la sintaxis objeto.nombre_funcion=function() * var actualY = coordenada top de la capa en cada momento * var scrollTop = coordenada top de la ventana scroleada en cada momento */ ocapa.coordenadas = function( ) { if(document.all) { this.actualY = this.capaDiv.style.pixelTop; //MCUH2 this.scrollTop = document.body.scrollTop; if (document.documentElement && document.documentElement.scrollTop) this.scrollTop = document.documentElement.scrollTop; else this.scrollTop = document.body.scrollTop; } else if(document.layers) { this.actualY = this.capaDiv.top; this.scrollTop = window.pageYOffset; } else if(document.getElementById) { this.actualY = parseInt(this.capaDiv.style.top); this.scrollTop = window.pageYOffset; } /** * var nuevoScrollTop = maximo valor de (coordenada de scroleo+la posicion definida como top inicial * de la capa) y distancia necesaria para el scroleo amortiguado * Inicialmente hemos establecido que la capa se scrolee de forma amortiguada desde su * posicion inicial superior, 20 px, a la marcada por la variable ceiling, 55px. * lo que vamos a hacer es que este efecto se mantenga en todo caso */ var nuevoScrollTop = Math.max( this.scrollTop + this.topMargin, this.ceiling ); /** * si escroleamos la ventana >> llamamos a la funcion desplaza, para mover la capa, * siempre que no se supere la posicion superior inicial de la misma, en cuyo caso llamamos * a la funcion ocapa.desplazaInit para iniciar de nuevo la secuencia */ if ( this.actualY != nuevoScrollTop ) { if ( nuevoScrollTop != this.targetY ) { this.targetY = nuevoScrollTop; this.desplazaInit( ); } this.desplaza( ); } } /** * funcion para el desplazamiento inicial de la capa, antes de scrolear la ventana * var ahora = contiene la fecha actual del ordenador del usuario * usamos getTime para obtener un tiempo en mlisegundos para definir el efecto de amortiguamiento * en el movimiento de la capa //MCUH en http://www.webreference.com/js/column18/slide.html * 'A': número de pixes a desplazar verticalmente * 'B': número de pasos * 'C': pausa, en ms, entre cada movimiento */ ocapa.desplazaInit = function( ) { var ahora = new Date( ) this.A = this.targetY - this.actualY ; this.B = Math.PI / ( 2 * this.desplazaTime ); this.C = ahora.getTime( ); this.D = this.actualY; } /* * fin de la funcion desplazaInit */ /** * funcion general de desplazamiento de la capa * usamos getTime para obtener un tiempo en milisegundos para definir el efecto de amortiguamiento, * mediante la aplicacion de una funcion seno * luego asignamos como coordenada superior de la capa los valores hayados con esta funcion */ ocapa.desplaza = function( ) { var ahora = new Date( ); var nuevaY = this.A * Math.sin( this.B * ( ahora.getTime( ) - this.C ) ) + this.D; nuevaY = Math.round( nuevaY )-_yCorrection; if ( ( this.A > 0 && nuevaY > this.actualY ) || ( this.A < 0 && nuevaY < this.actualY ) ) { if (document.all) this.capaDiv.style.pixelTop = nuevaY; else if(document.layers) this.capaDiv.top = nuevaY; else if(document.getElementById) //MCUH2this.capaDiv.style.top = nuevaY; this.capaDiv.style.top = nuevaY+'px'; } } /** fin de la funcion desplaza */ } /** fin de la funcion deslizar_init */ //MCUH1 function deslizar_addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } }