平滑滚动

？？？

解决方案 »

  1.   

    <html>
    <head>
    <style>img{width:270px}</style>
    </head>
    <body>
    开始：<a id=sha href="javascript:up()">向上</a> <a id=xia href="javascript:down()">向下</a>
    <div id=demo style=overflow:hidden;height:200;width:260;background:#214984;color:#ffffff>
    <div id=demo1>
    <img src="1.jpg"><br><img src="2.jpg"><br><img src="3.jpg"><br><img src="4.jpg">
    </div><div id=demo2></div>
     </div>
       <script>
    function up(b)
    {
       var speed=5
       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=xia.onmousedown=function() {clearInterval(MyMar)}//鼠标移上时清除定时器滚动停止
       demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
    }
    function down()
    {
        var speed=5
        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=sha.onmousedown=function() {clearInterval(MyMar)}
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    }
        </script>
    开始：<a id=zuo href="javascript:left()">向左</a> <a id=you href="javascript:right()">向右</a>
    <div id=demor style=overflow:hidden;height:200;width:800;background:#214984;color:#ffffff>
    <table align=left cellpadding=0 cellspace=0 border=0>
    <tr><td id=demor1 valign=top>
     <img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg">
    </td>
    <td id=demor2 valign=top></td>
    </tr></table>
    </div>
      <script>
    function left()
    {
      var speed=5
      demor2.innerHTML=demor1.innerHTML
      function Marquee(){
      if(demor2.offsetWidth-demo.scrollLeft<=0)
      demor.scrollLeft-=demor1.offsetWidth
      else{
      demor.scrollLeft++
      }
      }
      var MyMar=setInterval(Marquee,speed)
      demor.onmouseover=you.onmousedown=function() {clearInterval(MyMar)}
      demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    }
    function right()
    {
      var speed=5
      demor2.innerHTML=demor1.innerHTML
      demor.scrollLeft=demor.scrollWidth
      function Marquee(){
      if(demor.scrollLeft<=0)
      demor.scrollLeft+=demor2.offsetWidth
      else{
      demor.scrollLeft--
      }
      }
      var MyMar=setInterval(Marquee,speed)
      demor.onmouseover=zuo.onmousedown=function() {clearInterval(MyMar)}
      demor.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    }
      </script>
    </body>
    </html>