网页向左向右向上向下不间断滚动代码

作者:ier00 日期:2009-09-14

字体大小: 小中大

向上-----------------

<div id=demo style=overflow:hidden;height:100;width:90;

background:#214984;color:#ffffff>

<div id=demo1>

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

</div>

<div id=demo2></div>

</div>

   <script>

   var speed=30

   demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2

   function Marquee(){

//当滚动至demo1与demo2交界时

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端

else{

demo.scrollTop++

   }

   }

   var MyMar=setInterval(Marquee,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

   demo.onmouseover=function() {clearInterval(MyMar)}

//鼠标移开时重设定时器

   demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

</script>

向下的-----------------------

<div id=demo style=overflow:hidden;height:100;width:90;

background:#214984;color:#ffffff>

<div id=demo1>

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

<img src="http://www.baidu.com/img/logo.gif">

</div>

<div id=demo2></div>

</div>

    <script>

    var speed=30

    demo2.innerHTML=demo1.innerHTML

    demo.scrollTop=demo.scrollHeight

    function Marquee(){

    if(demo1.offsetTop-demo.scrollTop>=0)

    demo.scrollTop+=demo2.offsetHeight

    else{

    demo.scrollTop--

    }

    }

    var MyMar=setInterval(Marquee,speed)

    demo.onmouseover=function() {clearInterval(MyMar)}

    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

  </script>

向右的--------------------

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">

      <table cellpadding="0" cellspacing="0" border="0">

        <tr><td id="demo1" valign="top" align="center">

          <table cellpadding="2" cellspacing="0" border="0">

            <tr align="center">

              <td><img src="http://www.baidu.com/img/logo.gif" ></td>

              <td><img src="http://www.baidu.com/img/logo.gif" ></td>

              <td><img src="http://www.baidu.com/img/logo.gif" ></td>

              <td><img src="http://www.baidu.com/img/logo.gif" ></td>

              <td><img src="http://www.baidu.com/img/logo.gif" ></td>

            </tr>

          </table>

        </td>

        <td id="demo2" valign="top"></td>

        </tr>

      </table>

    </div>

  <script>

  var speed=1//速度数值越大速度越慢

  demo2.innerHTML=demo1.innerHTML

  function Marquee(){

  if(demo.scrollLeft<=0)

  demo.scrollLeft+=demo2.offsetWidth

  else{

  demo.scrollLeft--

  }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function() {clearInterval(MyMar)}

  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

  </script>

向左的-------------------------------------

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">

      <table cellpadding="0" cellspacing="0" border="0">

        <tr><td id="demo1" valign="top" align="center">

          <table cellpadding="2" cellspacing="0" border="0">

            <tr align="center">

              <td><img src="http://www.baidu.com/img/logo.gif"></td>

              <td><img src="http://www.baidu.com/img/logo.gif"></td>

              <td><img src="http://www.baidu.com/img/logo.gif"></td>

              <td><img src="http://www.baidu.com/img/logo.gif"></td>

              <td><img src="http://www.baidu.com/img/logo.gif"></td>

            </tr>

          </table>

        </td>

        <td id="demo2" valign="top"></td>

        </tr>

      </table>

    </div>

  <script>

  var speed=1//速度数值越大速度越慢

  demo2.innerHTML=demo1.innerHTML

  function Marquee(){

  if(demo.scrollLeft<=0)

  demo.scrollLeft+=demo2.offsetWidth

  else{

  demo.scrollLeft--

  }

  }

  var MyMar=setInterval(Marquee,speed)

  demo.onmouseover=function() {clearInterval(MyMar)}

  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

  </script>