彻底搞懂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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jQuery的学习步骤
Feb 23 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 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
模仿OSO的论坛(四)
2006/10/09 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JS模板实现方法
2013/04/03 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Pytorch之Variable的用法
2019/12/31 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
房地产销售计划书
2014/01/10 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
成龙洗发水广告词
2014/03/14 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书