彻底搞懂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 单引号 传递方法
Jun 22 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
javaScript中的空值和假值
Dec 18 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
原生js实现随机点名功能
Nov 05 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
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
详解Python中for循环的使用
2015/04/14 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python坐标线性插值应用实现
2019/11/13 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
化验室技术员岗位职责
2013/12/24 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
二审答辩状范文
2015/05/22 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL