文档章节

[javascript]文字无缝向上滚动

吾爱
 吾爱
发布于 2014/09/05 16:47
字数 481
阅读 6276
收藏 13

静态代码:

<!-- lang: html -->
<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);
})();

这样初步的效果出来了,但是还有一个问题: 当最后一行文字移动结束时,会有一段空白,然后突然复位,无法无缝滚动,解决也很容易,我们一开始就将第一段文字复制到最后一行后面,调整<P>标签的高度为30px。 附加css: <!-- lang: html --> <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); })();

完整的代码:

<!-- lang: html -->
<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>

© 著作权归作者所有

共有 人打赏支持
吾爱
粉丝 143
博文 269
码字总数 90617
作品 0
后端工程师
私信 提问
react在安卓下输入框被手机键盘遮挡问题

问题概述 今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之...

秋収冬藏
2018/08/30
0
0
15 个提高编程技巧的 JavaScript 工具

JavaScript 脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其 他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTM...

oschina
2015/01/14
5.8K
13
15个提高编程技巧的JavaScript工具

JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页...

IanSun
2015/03/14
0
0
15 个可提升编码技能的 JavaScript 工具

JavaScript库是一些预先编写好的JavaScript文件集合,用来让JavaScript应用开发更加便捷,尤其是AJAX和其他web开发。JavaScript的最主要用途是编写HTML中嵌入的函数,对页面的DOM(Document ...

oschina
2014/01/29
6.6K
12
JS控制文字滚动,刚刷新页面时文字滚动一下之后就不再滚动了,知道这是怎么回事吗?

JS控制文字滚动.刚刷新页面时文字滚动一下之后就不再滚动了,知道这是怎么回事吗?

liangxiao
2012/04/01
561
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring学习记录

Java类定义配置 @Configuration //标记为配置类@ComponentScan //标记为扫描当前包及子包所有标记为@Component的类@ComponentScan(basePackageClasses = {接口.class,...}) //标记为扫描当...

CHONGCHEN
48分钟前
1
0
如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
3
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
4
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
4
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部