哪位牛人帮我注释下下面javascript代码！！！

<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="http://www.alixixi.com/images/face/image21.gif" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<img src="http://www.alixixi.com/images/face/image21.gif" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<img src="http://www.alixixi.com/images/face/image21.gif" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<img src="http://www.alixixi.com/images/face/image21.gif" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<img src="http://www.alixixi.com/images/face/image21.gif" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
</div>
<div id=demo2></div>
</div><script>
var speed=10
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)//这里是啥意思哈？
demo.scrollTop-=demo1.offsetHeight)//这里是啥意思哈？else{
demo.scrollTop++)//这里是啥意思哈？}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

解决方案 »

  1.   

    offsetWidth   获取对象相对于版面或由父坐标   
    offsetParent   属性指定的父坐标的宽度。     
    offsetX   设置或获取鼠标指针位置相对于触发事件的对象的   x   坐标。     
    offsetY   设置或获取鼠标指针位置相对于触发事件的对象的   y   坐标。   scrollTop 是“卷”起来的高度值  向上卷  
      

  2.   

    scrollHeight: 获取对象的滚动高度。  
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
    scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
                即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
    scrollWidth:获取对象的滚动宽度 
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
    offsetTop:当前对象到其上级层顶部的距离.
    event.clientX 相对文档的水平座标 
    event.clientY 相对文档的垂直座标 if(demo2.offsetTop-demo.scrollTop <=0)//demo2 到demo的顶部距离减去demo 最顶部减去可视区域的距离.
    demo.scrollTop-=demo1.offsetHeight)//demo 最顶部减去可视区域的距离 减去demo1的高度。
    else{ 
    demo.scrollTop++)//demo 最顶部减去可视区域的距离加1. 
      

  3.   

    offsetLeft: Html元素相对于自己的offsetParent元素的位置
    scrollLeft: 返回和设置当前横向滚动条的坐标值
    scrollWidth: 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
    clientWidth: 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
    offsetWidth: 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
    offsetWidth: 是对象看到的宽度（含边线，如滚动条的占用的宽）offsetWidth的值总是比clientWidth的值大。
    ----------------------------------------------------------------------------------------------------------------
    在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽
    度，就有横向滚动条出来了，scrollWidth的值就变了,而clientWidth在这个例子里不会改变。
    ----------------------------------------------------------------------------------------------------------------
    图片滚动效果<!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">
    <head>
      <style type="text/css">
         img {border-right:1px solid #333333; border-bottom:1px solid #333333; border-left:1px solid #00CCFF; border-top:1px solid #00CCFF;}
      </style>
    </head>
    </head>
    <body leftMargin=0 topMargin=2 marginheight="0" marginwidth="0"><table style="margin-top:28px;" cellSpacing=0 cellPadding=0 width="868" align=center border=0>
      <tr>
        <td>
         <div id=demo style="overflow: hidden; WIDTH: 100%; COLOR: #ffffff">
          <table cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
            <tr>
              <td id=demo1 vAlign=top>
       <table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="171"><img src="pictures/01.jpg"></td>
                  <td width="171"><img src="pictures/02.jpg"></td>
                  <td width="171"><img src="pictures/03.jpg"></td>
                  <td width="171"><img src="pictures/04.jpg"></td>
                  <td width="171"><img src="pictures/05.jpg"></td>
                  <td width="171"><img src="pictures/06.jpg"></td>
                  <td width="171"><img src="pictures/07.jpg"></td>
                  <td width="171"><img src="pictures/08.jpg"></td>
                  <td width="171"><img src="pictures/09.jpg"></td>
                  <td width="171"><img src="pictures/10.jpg"></td>
                </tr>
       </table>
              </td>
      <td id=demo2 vAlign=top> </td>    
    </tr>
      </table>
     </div>
    </td>  
       
      </tr>
    </table>
    <div style="font-size:12px; text-align:right; margin-top:10px; padding-right:15px;"><a href="warn.htm">更多&gt;&gt;</a></div>
    <!-- <div id=demo3></div> -->
    <script>
           var speed3=25//速度数值越大速度越慢
           demo2.innerHTML=demo1.innerHTML
           function Marquee()
       {
               if((demo2.offsetWidth - demo.scrollLeft) <= 0)
                    demo.scrollLeft -= demo1.offsetWidth;
               else 
       {
                    demo.scrollLeft++;
               }
       //demo3.innerHTML=demo.scrollLeft;
           }
           var MyMar=setInterval(Marquee,speed3)
           demo.onmouseover=function() {clearInterval(MyMar);}
           demo.onmouseout=function() {MyMar=setInterval(Marquee, speed3);}
    </script>
    </body>
    </html>