JavaScript和jquery分别实现简单的跑马灯效果

1：javascript：

function showAnimateLine()
{
    var speed=6;
    function Marquee(){
        if(document.getElementById("line1").offsetWidth-document.getElementById("line").scrollLeft<=0){
              document.getElementById("line").scrollLeft-=document.getElementById("line1").offsetWidth;
          } 
        else{
         document.getElementById("line").scrollLeft++;
         }
     }
     setInterval(Marquee,speed);
}

2：jquery：

function showAnimateLine()
{
    var speed=6;
    var scrollLeft=0;
    function Marquee(){
       if($("#line1").width()-$("#line").scrollLeft()<=0){
      	   scrollLeft -=$("#line1").width();
           $("#line").scrollLeft(scrollLeft);
        }else{
           scrollLeft++;
           $("#line").scrollLeft(scrollLeft);
        }
    }
    setInterval(Marquee,speed);
}

将这两个实现方法写在一起的用意是 加深理解 offsetWidth scrollLeft width()  innerwidth()  outerWidth()  scrollLeft() 之间的区别。