彻底搞懂JS无缝滚动代码


Posted in Javascript onJanuary 03, 2007

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

 程序代码 

<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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JS 自动安装exe程序
Nov 30 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
经典的解除许多网站无法复制文字的绝招
Dec 31 #Javascript
对象的类型:本地对象(1)
Dec 29 #Javascript
JavaScript高级程序设计
Dec 29 #Javascript
JavaScript 参考教程
Dec 29 #Javascript
js自带函数备忘 数组
Dec 29 #Javascript
slice函数的用法 之不错的应用
Dec 29 #Javascript
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python循环监控远程端口的方法
2015/03/14 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python 异常处理的实例详解
2017/09/11 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
What is EJB
2016/07/22 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
高校教师思想汇报
2014/01/11 职场文书
企业管理培训感言
2014/01/27 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
Java无向树分析 实现最小高度树
2022/04/09 Javascript
SQL Server中的游标介绍
2022/05/20 SQL Server
如何利用python创作字符画
2022/06/25 Python