彻底搞懂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 相关文章推荐
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php遍历CSV类实例
2015/04/14 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
VueJs监听window.resize方法示例
2018/01/17 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Django之PopUp的具体实现方法
2019/08/31 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
高中语文课后反思
2014/04/27 职场文书
员工生日会策划方案
2014/06/14 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年手术室工作总结
2015/05/11 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python