彻底搞懂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 相关文章推荐
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue首次渲染全过程
Apr 21 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
经典的解除许多网站无法复制文字的绝招
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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php数据库备份还原类分享
2014/03/20 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
微信小程序日历效果
2018/12/29 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python中assert用法实例分析
2015/04/30 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python数据结构之链表的实例讲解
2017/07/25 Python
对python中return和print的一些理解
2017/08/18 Python
django 修改server端口号的方法
2018/05/14 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
企业治理工作自我评价
2013/09/26 职场文书
给导游的表扬信
2014/01/10 职场文书
工程质量月活动方案
2014/02/19 职场文书
平安工地建设方案
2014/05/06 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
单位租车协议书
2015/01/29 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Redis中一个String类型引发的惨案
2021/07/25 Redis
golang实现浏览器导出excel文件功能
2022/03/25 Golang
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技