doc ument.getElementById
Highlight @IsabelM, highlight por favor ...
Dejo una variante, la probé en un par de celulares con navegadores bastante limitados y funciona, aunque el desplazamiento no es muy suave que digamos, va como por etapas.
En IE 7 a 9 y el resto, funciona Ok
Código HTML:
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"> <meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" /> html,body {
margin: 0; padding: 0;
}
#bloqueIzq {
position:absolute;
left:0px;
top:2em;
width:50px;
background:#68A460;
border:1px solid #003366;
padding:5px;
z-index: 999;
margin: 0;
text-align: center;
}
#bloqueDer {
position:absolute;
right:0px;
top:2em;
width:50px;
background:#99ccff;
border:1px solid #003366;
padding:5px;
z-index : 1;
margin: 0;
text-align: center;
}
<script type="text/javascript"> //<![CDATA[
// Utilizando winH podemos hacer el efecto aún cuando se redimensione la ventana
var winW;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
}
var i = 0;
var t;
function mover(margen,demora){
var pos = (winW/2)-margen; // margen igual a la cuarta parte del ancho del div (tener en cuenta posibles paddings laterales
var capa = document.getElementById('bloqueIzq');
var capa2 = document.getElementById('bloqueDer');
i++;
t= setTimeout(function() {
capa.style.left = i + 'px';
capa2.style.right = i + 'px';
mover(margen,demora);
if(i > pos){
clearTimeout(t);
}
}, demora);
}
//]]>
<body onload="mover(15,1);">
Saludos