四个方向的滚动代码

Posted on 2008年01月23日 by sprite

四个方向的滚动代码
向上滚动

  1. <div id="demo" style="90">
  2. <div id="demo1">
  3.  <img src="http://www.haao.cn/logo.gif">
  4.  <img src="http://www.haao.cn/logo.gif">
  5.  <img src="http://www.haao.cn/logo.gif">
  6.  <img src="http://www.haao.cn/logo.gif">
  7.  <img src="http://www.haao.cn/logo.gif">
  8.  <img src="http://www.haao.cn/logo.gif">
  9.  <img src="http://www.haao.cn/logo.gif">
  10.  <img src="http://www.haao.cn/logo.gif">
  11.  <img src="http://www.haao.cn/logo.gif">
  12.  </div>
  13.  <div id="demo2"></div>
  14.  </div>
  15.    <script>
  16.    var speed=30
  17.    demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
  18.    function Marquee(){
  19. //当滚动至demo1与demo2交界时
  20. if(demo2.offsetTop-demo.scrollTop&lt;=0)
  21. demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
  22. else{
  23. demo.scrollTop++
  24.    }
  25.    }
  26.    var MyMar=setInterval(Marquee,speed)//设置定时器
  27. //鼠标移上时清除定时器达到滚动停止的目的
  28.    demo.onmouseover=function() {clearInterval(MyMar)}
  29. //鼠标移开时重设定时器
  30.    demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
  31. </script>

向下滚动

  1. <div id="demo" style="90">
  2. <div id="demo1">
  3.  <img src="http://www.haao.cn/logo.gif">
  4.  <img src="http://www.haao.cn/logo.gif">
  5.  <img src="http://www.haao.cn/logo.gif">
  6.  <img src="http://www.haao.cn/logo.gif">
  7.  <img src="http://www.haao.cn/logo.gif">
  8.  <img src="http://www.haao.cn/logo.gif">
  9.  <img src="http://www.haao.cn/logo.gif">
  10.  <img src="http://www.haao.cn/logo.gif">
  11.  <img src="http://www.haao.cn/logo.gif">
  12. </div>
  13. <div id="demo2"></div>
  14. </div>
  15.     <script>
  16.     var speed=30
  17.     demo2.innerHTML=demo1.innerHTML
  18.     demo.scrollTop=demo.scrollHeight
  19.     function Marquee(){
  20.     if(demo1.offsetTop-demo.scrollTop&gt;=0)
  21.     demo.scrollTop+=demo2.offsetHeight
  22.     else{
  23.     demo.scrollTop--
  24.     }
  25.     }
  26.     var MyMar=setInterval(Marquee,speed)
  27.     demo.onmouseover=function() {clearInterval(MyMar)}
  28.     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  29.   </script>

向左滚动

  1. <div id="demo" style="width:600px;color:#ffffff">
  2.       <table cellpadding="0" cellspacing="0" border="0">
  3.         <tr><td valign="top" align="center">
  4.           <table cellpadding="2" cellspacing="0" border="0">
  5.             <tr align="center">
  6.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  7.               <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  8.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  9.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  10. <td><img src="http://www.haao.cn/logo.gif" width="88"></td><td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  11.               <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  12.             </tr>
  13.           </table>
  14.         </td>
  15.         <td valign="top"></td>
  16.         </tr>
  17.       </table>
  18.     </div>
  19.   <script>
  20.   var speed=1//速度数值越大速度越慢
  21.   demo2.innerHTML=demo1.innerHTML
  22.   function Marquee(){
  23.   if(demo2.offsetWidth-demo.scrollLeft&lt;=0)
  24.   demo.scrollLeft-=demo1.offsetWidth
  25.   else{
  26.   demo.scrollLeft++
  27.   }
  28.   }
  29.   var MyMar=setInterval(Marquee,speed)
  30.   demo.onmouseover=function() {clearInterval(MyMar)}
  31.   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  32.   </script>

向右滚动

  1. <div id="demo" style="width:670px;color:#ffffff">
  2.       <table cellpadding="0" cellspacing="0" border="0">
  3.         <tr><td valign="top" align="center">
  4.           <table cellpadding="2" cellspacing="0" border="0">
  5.             <tr align="center">
  6.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  7.               <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  8.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  9.   <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  10.               <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
  11.             </tr>
  12.           </table>
  13.         </td>
  14.         <td valign="top"></td>
  15.         </tr>
  16.       </table>
  17.     </div>
  18.   <script>
  19.   var speed=1//速度数值越大速度越慢
  20.   demo2.innerHTML=demo1.innerHTML
  21.   function Marquee(){
  22.   if(demo.scrollLeft&lt;=0)
  23.   demo.scrollLeft+=demo2.offsetWidth
  24.   else{
  25.   demo.scrollLeft--
  26.   }
  27.   }
  28.   var MyMar=setInterval(Marquee,speed)
  29.   demo.onmouseover=function() {clearInterval(MyMar)}
  30.   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  31.   </script>




This entry was posted in 技术研究 and tagged . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

以新浪微博帐号登录