[javascript]文字无缝向上滚动
来源:互联网 发布:大数据的具体应用 编辑:程序博客网 时间:2024/06/04 08:10
静态代码:
<div style="height:30px;overflow:hidden;"> <div id='marquee'> <p>第1段</p> <p>第2段</p> <p>第3段</p> <p>第4段</p> <p>第5段</p> </div></div>
解释:首先最外层是一个高度只有30px的层,这样大概只能显示一行文字。然后里面有一个 #marquee的层,这个层包含了很多段文字,高度实际超出30px很多,我们要实现的就是将#marquee不停的往上滚动,这样多行内容将依次在30px中显示。
思路:通过js的定时器,每隔50毫秒将#marquee层的css属性margin-top -1px,并且在最后一段文字移动过去后将margin-top归零。
初步代码:
<!-- lang: js -->(function(){ var marquee = document.getElementById('marquee'); var offset=0; var scrollheight =marquee.offsetHeight; setInterval(function(){ if(offset == scrollheight){ offset = 0; } marquee.style.marginTop = "-"+offset+"px"; offset += 1; },50);})();
这样初步的效果出来了,但是还有一个问题:
当最后一行文字移动结束时,会有一段空白,然后突然复位,无法无缝滚动,解决也很容易,我们一开始就将第一段文字复制到最后一行后面,调整
标签的高度为30px。
附加css:
<style> #marquee p{height:30px;line-height: 30px;margin:0}</style>
js代码:
<!-- lang: js -->(function(){ var marquee = document.getElementById('marquee'); var offset=0; var scrollheight =marquee.offsetHeight; var firstNode = marquee.children[0].cloneNode(true); marquee.appendChild(firstNode);//还有这里 setInterval(function(){ if(offset == scrollheight){ offset = 0; } marquee.style.marginTop = "-"+offset+"px"; offset += 1; },50);})();
完整的代码:
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <style> #marquee p{height:30px;line-height: 30px;margin:0} </style> <div style="height:30px;overflow:hidden;"> <div id='marquee'> <p>第1段</p> <p>第2段</p> <p>第3段</p> <p>第4段</p> <p>第5段</p> </div> </div> <script> (function(){ var marquee = document.getElementById('marquee'); var offset=0; var scrollheight =marquee.offsetHeight; var firstNode = marquee.children[0].cloneNode(true); marquee.appendChild(firstNode);//还有这里 setInterval(function(){ if(offset == scrollheight){ offset = 0; } marquee.style.marginTop = "-"+offset+"px"; offset += 1; },50); })(); </script> </body></html>
0 0
- [javascript]文字无缝向上滚动
- javascript实现文字列表无缝向上滚动
- JavaScript实现文字列表无缝向上滚动
- 文字向上无缝滚动
- 文字向上无缝滚动
- 文字无缝向上滚动
- 向上无缝滚动javascript
- 文字向上无缝滚动代码
- javascript文字无缝滚动
- 文字向上的无缝滚动JS
- 文字列表无缝向上滚动代码
- js实现文字向上无缝滚动
- JavaScript实现垂直向上无缝滚动特效
- JQ插件第五十:文字列表无缝向上滚动
- 图片向上无缝滚动
- 向上无缝滚动
- 图片无缝向上滚动
- javascript文字无间隙向上滚动代码
- JS 实现显示当前时间
- 安装testlink 1.9.4 Read/write permissions报错
- MyBatis和Spring整合配置文件笔记
- 反射
- [NOIP 2011]聪明的质检员 二分+前缀和
- [javascript]文字无缝向上滚动
- 清除浮动的方法
- CPPCMS从编译到开始
- Java语言基础之封装类
- testng使用
- Derby数据库
- 上课记录笔记 项目1 文字大乱斗 v0.1
- C++虚函数的作用
- Javascript模块化编程——读书笔记