首页 > 代码库 > [javascript]文字无缝向上滚动
[javascript]文字无缝向上滚动
静态代码:
<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归零。
初步代码:
(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代码:
(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>
[javascript]文字无缝向上滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。