图片滚动（图片左右一直运动）

 

 

 

 

<DIV id=demo style="BACKGROUND: #214984; OVERFLOW: hidden; WIDTH: 158px; COLOR: #ffffff; HEIGHT: 598px">      <!--demo的高度需要小于等于demo1，否则不能循环。-->

      <DIV id=demo1><!-- 定义图片 --> 
          <IMG height=130 src="表单网页_files/F200602161743593194929892.jpg" width=150 border=0> 
          <IMG height=157 src="images/0038.jpg" width=158> 
          <IMG height=156 src="images/NewsMedia_176140.jpg" width=154> 
          <IMG height=118 src="../P922118900.jpg" width=155 border=0> 
          <IMG height=118 src="../P922118900.jpg" width=155  border=0> 
      </DIV> 
      <DIV id=demo2> 
      <P>　</P></DIV></DIV> 
      <SCRIPT type="text/javascript"> 
   var speed=30; //图片滚动速度
   demo2.innerHTML=demo1.innerHTML;  //克隆demo1为demo2 

 仔细研究代码里offsetTop、scrollTop、offsetHeight，得出这样的结论：

    offsetTop：当前对象到其上级层顶部的距离。

    scrollTop：对象顶端滚动出显示范围的值，下图上面虚线框里就是Demo向上滚动时隐藏的部分。

    offsetHeight：当前对象的高度值。

   function Marquee(){ 
   if(demo2.offsetTop-demo.scrollTop<=0) //当demo1与demo2的交界处滚动至demo顶端时 
      demo.scrollTop-=demo1.offsetHeight;    //demo跳回到原始顶端位置 
   else{ 
     demo.scrollTop++;  //demo向上滚动一个像素 
         } 
      } 
   var MyMar=setInterval(Marquee,speed); //设置定时器 
   demo.onmouseover=function() {clearInterval(MyMar)}; //鼠标移上时清除定时器达到滚动停止的目的 
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器</SCRIPT>

 仔细研究代码里offsetTop、scrollTop、offsetHeight，得出这样的结论：

    offsetTop：当前对象到其上级层顶部的距离。

    scrollTop：对象顶端滚动出显示范围的值，下图上面虚线框里就是Demo向上滚动时隐藏的部分。

    offsetHeight：当前对象的高度值。

 

类似的offsetLeft、scrollLeft、offsetWidth含义如下：

     offsetLeft：当前对象到其上级层左部的距离。

     scrollLeft：对象左端滚动出显示范围距离的值。

     offsetWidth：当前对象的宽度值。