彻底搞懂JS无缝滚动代码

 更新时间:2007年01月03日 00:00:00   作者:   我要评论

在做个东西要滚动代码 而且是无缝的 搞了半天还是不行 
决心一定要把这个问题搞定 经过研究 也不难 代码如下:

 程序代码 

复制代码 代码如下:
<div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> 
<table  align=top> 
<tr> 
<td id=demo1 valign=top> 

<p>aaaaaaaaaaa</p> 
<p>aaaaaaaaaaa</p> 
<p>aaaaaaaaaaa</p> 
<p>aaaaaaaaaaa</p> 
<p>aaaaaaaaaaa</p> 
<p>aaaaaaaaaaa</p> 


 </td> 
</tr> 
<tr> 
<td id=demo2 valign=top></td> 
</tr> 
</table> 

</div> 
<script> 
var speed=15 
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2 
function Marquee(){ 
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时 
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端 
else{ 
demo.scrollTop++  //如果是横向的 将 所有的 height top 改成 width left 


var MyMar=setInterval(Marquee,speed)//设置定时器 
demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器 
</script> 




复制到一个HTM的文件即可运行了. 

相关文章

  • 关于JavaScript数组你所不知道的3件事

    关于JavaScript数组你所不知道的3件事

    这篇文章主要为大家详细介绍了关于JavaScript数组三个并不那么常见的功能,你所不知道的事情,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript获取文档坐标和视口坐标

    javascript获取文档坐标和视口坐标

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。有需要的小伙伴可以参考下。
    2015-05-05
  • 详解ES7 Decorator 入门解析

    详解ES7 Decorator 入门解析

    这篇文章主要介绍了详解ES7 Decorator 入门解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 纯js的右下角弹窗实例

    纯js的右下角弹窗实例

    下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JavaScript中document.forms[0]与getElementByName区别

    JavaScript中document.forms[0]与getElementByName区别

    在很多情况下JavaScript中document.forms[0]与getElementByName这两种用法没有区别,这片文章详细的解释了两者的区别和用法,有兴趣的朋友可以参考一下。
    2015-01-01
  • 微信小程序实现城市列表选择

    微信小程序实现城市列表选择

    这篇文章主要为大家详细介绍了微信小程序实现城市列表选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • javascript实现简单的分页特效

    javascript实现简单的分页特效

    下面给大家汇总的几个javascript实现的分页代码,当然必须要结合后台代码实现。大家可以自行分析一下代码,希望能够给大家带来一定的帮助
    2015-08-08
  • 微信小程序全局变量功能与用法详解

    微信小程序全局变量功能与用法详解

    这篇文章主要介绍了微信小程序全局变量功能与用法,结合实例形式详细分析了微信小程序全局变量的作用、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-01-01
  • JavaScript中原型链存在的问题解析

    JavaScript中原型链存在的问题解析

    本文通过实例给大家介绍js原型链存在的问题解析,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • js实现checkbox全选、不选与反选的方法

    js实现checkbox全选、不选与反选的方法

    这篇文章主要介绍了js实现checkbox全选、不选与反选的方法,以实例形式详细分析了实现的思路及对应的html与js代码的实现过程,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论