请一个这样的网页特效如何实现？很实用很少见的。

Question

我以前见过一个网页。
效果就是，有很多类似表格行，每行有很多内容。需要IE浏览器拖动垂直滚动条才能一个接一个的看。但是，一旦某一行位于当前屏幕大概中间位置的时候，该行就自动变色。随着屏幕滚动，改行不再处于屏幕中心的时候，颜色自动复位。请问这种效果怎么实现？请给出可行的代码，非常感谢！

Answer 1

可以告诉你思路， 根据浏览器的高度/2的位置，设定在此位置上的tr或者li的背景色变红，否则变白。浏览器滚动条事件onscroll

Answer 2

<style>
.cen {
  background-color: #999;
}
.not-cen {
  background-color: #fff;
}
</style><script>
var lineHeight;
var lines;
var beforCenLine;
var trs;
  function aa(obj) {
     var topLine = Math.floor(parseInt(obj.scrollTop) / lineHeight);
     var cenLine = Math.floor(lines / 2) + topLine - 1;
     //alert(document.getElementById('show-table').rows.length);
     
     //显示中间
     if(beforCenLine != null) {
       trs[beforCenLine].className = 'not-center';
     }
     trs[cenLine].className = 'cen';
     beforCenLine = cenLine;
  }
  onload = function(){
     var obj = document.getElementById('get-line');
     lineHeight = parseInt(obj.clientHeight);//得到一行的高度，用于下面的操作
     lines = 200 / lineHeight; //div的显示高度除去单行高度，即为显示的行数。
     trs = document.getElementById('show-table').rows; //行对象
     trs[lines/2-1].className = 'cen';
     beforCenLine = lines/2-1;
  }
</script>
<div id='scroo-div' style="width:100%;height:200px;overflow:auto;" onscroll="aa(this)">
<table width="100%" id="show-table">
  <tr><td id="get-line">1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>2</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>3</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>4</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>5</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>6</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>7</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>8</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>9</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>11</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>12</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>13</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>14</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>15</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>16</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>17</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>18</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>19</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  <tr><td>20</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>简单弄了下，可以看看效果

Answer 3

scroll事件后 
1)计算表格显示的偏移量2)设置相对偏移量的一行的颜色(原来设置过颜色的哪行取消)

Answer 4

基本思路是用一个div包含table，然后这个table的各行应该有共性，存放一类数据，所以每行高度一致。然后就可以通过事件响应，来计算，然后就是用css来显示背景了。注意一点，就是要把前一行的背景再还原即可。我就是这样理解的。上面的代码可以直接用，没有问题，在ff和ie下面都通过了。