收集整理的四个方向的滚动

更新时间：2006年06月26日 00:00:00 作者：

向上滚动

</P>
<P><div id=demo style=overflow:hidden;height:100;width:90; background:#214984;color:#ffffff> <div id=demo1>  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.gif">  <img src="https://www.jb51.net/logos.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> </P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向下滚动

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向左滚动

</P>
<P><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="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>            </tr>          </table>        </td>        <td id="demo2" valign="top"></td>        </tr>      </table>    </div>  <script>  var speed=1//速度数值越大速度越慢  demo2.innerHTML=demo1.innerHTML  function Marquee(){  if(demo2.offsetWidth-demo.scrollLeft<=0)  demo.scrollLeft-=demo1.offsetWidth  else{  demo.scrollLeft++  }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function() {clearInterval(MyMar)}  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  </script></P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

向右滚动

</P>
<P><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="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>     <td><img src="https://www.jb51.net/logos.gif" width="88"></td>              <td><img src="https://www.jb51.net/logos.gif" width="88"></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></P>
<P>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

收集整理的四个方向的滚动

JS 4个超级实用的小技巧提升开发效率
JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧，在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟
2021-09-09
JavaScript的八种数据类型
这篇文章主要分享的是JavaScript的八种数据类型，ES5的时候，我们大家认知的数据类型是 6种的，但是ES6 中新增了一种 Symbol，谷歌67版本中还出现了一种 bigInt，是指安全存储、操作大整数，像下面文章我可没就来看看这八种数据类型的详细介绍吧
2022-01-01
JavaScript 定时器详情
这篇文章主要介绍了JavaScript 定时器，在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法，下面来看看文章的详细介绍
2021-11-11
一款功能强大的markdown编辑器tui.editor使用示例详解
这篇文章主要为大家介绍了一款功能强大的markdown编辑器tui.editor使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
微信小程序 LOL 英雄介绍开发实例
这篇文章主要介绍了微信小程序 LOL 英雄介绍开发的相关资料,需要的朋友可以参考下
2016-09-09
JS轻量级函数式编程实现XDM三
这篇文章主要为大家介绍了JS轻量级函数式编程实现XDM示例详解第3/3篇，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
在JavaScript实例对象中改写原型方法详情
这篇文章主要介绍了在JavaScript实例对象中改写原型方法的一下相关资料,需要的效果版可以参考一下文章详细内容，希望对你有所帮助
2021-10-10
小程序开发踩坑：页面窗口定位（相对于浏览器定位）（推荐）
这篇文章主要介绍了小程序开发页面窗口定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
微信小程序免费SSL证书https、TLS版本问题的解决办法
这篇文章主要介绍了微信小程序免费SSL证书https、TLS版本问题的解决办法的相关资料,需要的朋友可以参考下
2016-12-12
微信小程序欢迎页面的制作（源码下载）
这篇文章主要介绍了微信小程序欢迎页面的制作含（源码下载）的相关资料,这里实现欢迎页面，开始做应用的时候都会用到，需要的朋友可以参考下
2017-01-01