Gracias, Wikipedia.
ShareCodeTreeCode

Goose, la red social libre

PleasOn - Menu QR
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

HTMLCSSJSVista previa
1 2 3 4 5 6 Scroll1 = function() {7  8  this.setParentNode = function(parentNode) {9  parentNode.appendChild(prop);10  parentNode.appendChild(dom);11  }12  13  var watch = function(valor) {14  prop.innerHTML += valor + '<br>';15  }16  17  var watchClear = function() {18  prop.innerHTML = 'PROPIEDADES ('+refresh_count+')<BR>';19  refresh_count++;20  }21  22  this.refresh = function() {23  watchClear();24  watch('scrollTop: '+dom.scrollTop);25  watch('scrollHeight: '+dom.scrollHeight);26  watch('offsetTop: '+dom.offsetTop);27  watch('offsetHeight: '+dom.offsetHeight);28  watch('clientTop: '+dom.clientTop);29  30  31  var t = dom.scrollTop + dom.offsetHeight/2;32  33  for (i=0; i<N1; i++) {34  for (j=0; j<N2; j++) {35  /*a[i*1000+1+j].innerHTML = ''36  +'scrollTop: '+a[i*1000+1+j].scrollTop37  +'<br>scrollHeight: '+a[i*1000+1+j].scrollHeight38  +'<br>offsetTop: '+a[i*1000+1+j].offsetTop39  +'<br>offsetHeight: '+a[i*1000+1+j].offsetHeight40  +'<br>clientTop: '+a[i*1000+1+j].clientTop41  ;*/42  43  44  45  if ( t > a[i*1000+1+j].offsetTop && t < a[i*1000+1+j].offsetHeight + a[i*1000+1+j].offsetTop) {46  if (a[i*1000+1+j].style.backgroundColor != 'silver') {47  a[i*1000+1+j].style.backgroundColor = 'silver';48  ajax_loads++;49  }50  i=N1;51  j=N2;52  } else {53  //a[i*1000+1+j].style.background = 'white';54  }55  a[i*1000+1+j].innerHTML = a[i*1000+1+j].offsetTop;56  57  58  }59  }60  watch('AjaxLoads: '+ajax_loads);61  }62 63  64  dom = document.createElement('div');65  dom.style.height = '400px';66  dom.style.border = 'solid red 1px';67  dom.style.overflow = 'scroll';68  dom.style.margin = '10px 310px 0 310px';69  dom.addEventListener('scroll', this.refresh, true);70  71  prop = document.createElement('div');72  prop.style.width = '300px';73  prop.style.cssFloat = 'left';74  prop.style.border = 'solid blue 1px';75  watchClear();76  77  var N1 = 10;78  var N2 = 3;79  80  var ajax_loads = 0;81  82  var a = Array();83  for (i=0; i<N1; i++) {84  a[i*1000] = document.createElement('div');85  //a[i*1000].style.width = '200px';86  a[i*1000].style.border = 'solid orange 1px';87  a[i*1000].style.margin = '10px';88  dom.appendChild(a[i*1000]);89  for (j=0; j<N2; j++) {90  a[i*1000+1+j] = document.createElement('div');91  a[i*1000+1+j].style.width = '200px';92  a[i*1000+1+j].style.height = '200px';93  a[i*1000+1+j].style.border = 'solid green 1px';94  a[i*1000+1+j].style.margin = '10px';95  a[i*1000+1+j].onclick = function() {dom.scrollTop = this.offsetTop - dom.offsetTop; /*dom.scrollTo(0, a[i*1000+1+j].offsetTop);*/};96  a[i*1000].appendChild(a[i*1000+1+j]);97  }98  }99  100  var refresh_count = '0';101  102 }
Enlace Duplicar
Enlace
El enlace para compartir es: