前端常用效果——信息滚动效果

一、使用marquee标签实现信息滚动

HTML的marquee用来插入一段滚动的文字。可以使用它的属性控制当文本到达容器边缘发生的事情。

1、marquee属性

1.1、behavior——设置文本在marquee元素内滚动的方式。
可选值有scroll，slide和alternate。如果未指定值，默认值为scroll。
scroll表示由一端滚动到另一端，会重复。
slide表示由一端滚动到另一端，不会重复。
alternate表示在两端之间来回滚动。
1.2、direction——设置marquee内文本滚动的方向。
可选值有left,right,up and down。如果未指定值，默认值为left。
1.3、loop——设置滚动的次数。如果未指定值，默认值为 −1，表示连续滚动。
1.4、scrollamount——设置每次滚动时移动的长度（以像素为单位），默认值为6。
1.5、scrolldelay——设置每次滚动时的时间间隔（以毫秒为单位）。
默认值为85。除非指定truespeed值，否则将忽略任何小于60的值，并改为使用60。
1.6、bgcolor——通过颜色名称或十六进制值设置背景颜色。
1.7、height——以像素或百分比值设置高度。
1.8、width——以像素或百分比值设置宽度。
1.9、hspace——设置水平边距。
1.10、vspace——以像素或百分比值设置垂直边距。
1.11、truespeed——默认情况下，会忽略小于60的scrolldelay值。若存在truespeed，那值不会被忽略。

2、marquee方法

2.1、start——开始滚动marquee。
2.2、stop——停止滚动 marquee。

需要注意的是：
marquee标签已废弃，不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是可以对用户做最糟糕的事情之一，所以不要这样做。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用marquee标签实现信息滚动</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        ul{width:500px;height:500px;border:1px solid #000;margin:100px auto;}
        ul li{list-style:none;}
    </style>
</head>
<body>
    <ul>
        <li>
            <marquee>使用marquee标签实现信息滚动</marquee></li>
            <marquee onmouseover="this.stop()" onmouseout="this.start()">
            使用marquee标签实现信息滚动</marquee>
        </li>
        <li>
            <marquee behavior="scroll">使用marquee标签实现信息滚动</marquee></li>
            <marquee behavior="slide">使用marquee标签实现信息滚动</marquee></li>
            <marquee behavior="alternate">使用marquee标签实现信息滚动</marquee></li>
        <li>
            <marquee direction="left">使用marquee标签实现信息滚动</marquee></li>
            <marquee direction="right">使用marquee标签实现信息滚动</marquee></li>
            <marquee direction="up">使用marquee标签实现信息滚动</marquee></li>
            <marquee direction="down">使用marquee标签实现信息滚动</marquee></li>
        <li>
            <marquee loop="3" scrollamount="10" scrolldelay="100">
               使用marquee标签实现信息滚动 
            </marquee>
        </li>
        <li>
            <marquee width="300px" height="100px" bgcolor="orange">
               使用marquee标签实现信息滚动 
            </marquee>
        </li>
    </ul>
</body>
</html>

二、使用javascript实现文字信息无缝滚动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Javascript实现文字信息无缝滚动</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{
            width:500px;
            height:350px;
            margin:100px auto;
            border:1px solid #000;
            border-radius:20px;
            box-shadow:5px 5px 10px #333;
            overflow:hidden;
        }
        h3{
            height:50px;
            line-height:50px;
            text-align:center;
            font-size:28px;
            color:#fff;
            background:green;
        }
        .content{
            height:300px;
            overflow:hidden;
        }
        ul li{
            list-style:none;
            height:40px;
            line-height:40px;
            text-align:left;
            padding-left:20px;
            font-size:18px;
            color:#333;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>信息列表</h3>
        <div class="content" id="content">
            <ul class="msg1" id="msg1">
                <li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
                <li>20余省公务员省考笔试放榜 作弊者特别惨</li>
                <li>辟谷减肥：“大师”称意念发功可治病</li>
                <li>2017公务员考试34万人报名 平均24人抢1个职位</li>
                <li>钢票网与恒丰银行正式签订资金存管协议</li>
                <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
                <li>美国会表决通过新驻华大使 月底有望赴华</li>
                <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
                <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
                <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
            </ul>
            <ul id="msg2"></ul>
        </div>
    </div>
    <script>
        var content=document.getElementById("content");
        var msg1=document.getElementById("msg1");
        var msg2=document.getElementById("msg2");
        msg2.innerHTML=msg1.innerHTML;
        var timer=100;
        content.scrollTop=0;
        function myScrollTop(){
            if(content.scrollTop>content.scrollHeight){
                content.scrollTop=0;
            }else{
                content.scrollTop++
            }
        }
        setInterval('myScrollTop()',timer);
    </script>
</body>
</html>

三、使用javascript实现文字信息无缝滚动鼠标悬停效果添加

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Javascript实现文字信息无缝滚动</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{
            width:500px;
            height:350px;
            margin:100px auto;
            border:1px solid #000;
            border-radius:20px;
            box-shadow:5px 5px 10px #333;
            overflow:hidden;
        }
        h3{
            height:50px;
            line-height:50px;
            text-align:center;
            font-size:28px;
            color:#fff;
            background:green;
        }
        .content{
            height:300px;
            overflow:hidden;
        }
        ul li{
            list-style:none;
            height:40px;
            line-height:40px;
            text-align:left;
            padding-left:20px;
            font-size:18px;
            color:#333;
        }
        li:hover{color:#f91;}
    </style>
</head>
<body>
<div class="box">
    <h3>信息列表</h3>
    <div class="content" id="content">
        <ul class="msg1" id="msg1">
            <li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
            <li>20余省公务员省考笔试放榜 作弊者特别惨</li>
            <li>辟谷减肥：“大师”称意念发功可治病</li>
            <li>2017公务员考试34万人报名 平均24人抢1个职位</li>
            <li>钢票网与恒丰银行正式签订资金存管协议</li>
            <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
            <li>美国会表决通过新驻华大使 月底有望赴华</li>
            <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
            <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
            <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
        </ul>
        <ul id="msg2"></ul>
    </div>
</div>
<script>
    var content=document.getElementById("content");
    var msg1=document.getElementById("msg1");
    var msg2=document.getElementById("msg2");
    msg2.innerHTML=msg1.innerHTML;
    var timer=100;
    content.scrollTop=0;
    function myScrollTop(){
        if(content.scrollTop>content.scrollHeight){
            content.scrollTop=0;
        }else{
            content.scrollTop++
        }
    }
    upScroll = setInterval('myScrollTop()',timer);
    content.onmouseover=function(){
      clearInterval(upScroll);
    };
    content.onmouseout=function(){
        upScroll = setInterval('myScrollTop()',timer);
    };
</script>
</body>
</html>

四、使用javascript实现文字信息间歇性滚动

4.1、setTimeout()

*用法说明：
setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。（1000毫秒=1秒）
使用clearTimeout()方法来阻止该函数的执行。
setTimeout()在执行时，是在载入后延迟指定时间去执行一次表达式，仅执行一次。
*语法：
setTimeout(function, delayseconds, param1, param2, ...)
*参数描述：
function必需，要调用一个代码串，也可以是一个函数。
delayseconds可选，延迟时间，执行或调用function需要等待的时间，以毫秒计。默认为0。
param1, param2, ... 可选。传给执行函数的其他参数（IE9及其更早版本不支持该参数）。
*返回值:   
返回一个ID（数字），可以将这个ID传递给clearTimeout()来取消执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>setTimeout方法</title>
</head>
<body>
    <p id="ptxt"></p>
    <script type="text/javascript">
        var p = document.getElementById("ptxt");
        var value;
        function log(){
            value = 5;
            p.innerHTML = value;
        }
        var txt = setTimeout("log()",1000);
    </script>
</body>
</html>

4.2、setInterval()

*用法说明：
setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。
setInterval()返回的ID值可用作clearInterval()方法的参数。
setInterval()在执行时，载入后每隔指定的时间就执行一次。
*语法：
setInterval(function, seconds, param1, param2, ...)
*参数描述：
function必需，要调用一个代码串，也可以是一个函数。
seconds必须,周期性执行或调用function之间的时间间隔，以毫秒计。
param1, param2, ... 可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
*返回值:   
返回一个ID（数字），可以将这个ID传递给clearInterval()，clearTimeout()以取消执行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>setInterval方法</title>
</head>
<body>
    <script>
        setInterval("console.log('8')",1000);
    </script>
</body>
</html>

4.3、clearTimeout()

*用法说明：
clearTimeout()方法可取消由setTimeout()方法设置的定时操作。
clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
    要使用clearTimeout()方法,在创建执行定时操作时要使用全局变量：x=setTimeout(function,delayseconds);如果方
法还未被执行，可以使用clearTimeout()来阻止它。
*语法:
clearTimeout(id_of_settimeout)
*参数描述:
id_of_setinterval:调用setTimeout()函数时所获得的返回值.
使用该返回标识符作为参数，可以取消该setTimeout() 所设定的定时执行操作。
*返回值:   
没有返回值。

4.4、clearInterval()

*用法说明：
clearInterval()方法可取消由setInterval()函数设定的定时执行操作。
clearInterval()方法的参数必须是由setInterval()返回的ID值。
    要使用clearInterval()方法, 在创建执行定时操作时要使用全局变量：x=setInterval(function, delayseconds);
可通过clearInterval()方法来停止执行。
*语法:
clearInterval(id_of_setinterval)
*参数描述:
id_of_setinterval:调用 setInterval() 函数时所获得的返回值.
使用该返回标识符作为参数，可以取消该setInterval()所设定的定时执行操作。
*返回值:   
没有返回值。

4.5、实现间歇性信息滚动效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Javascript实现文字信息间歇性滚动滚动</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .box{
            width:500px;
            height:350px;
            margin:100px auto;
            border:1px solid #000;
            border-radius:20px;
            box-shadow:5px 5px 10px #333;
            overflow:hidden;
        }
        h3{
            height:50px;
            line-height:50px;
            text-align:center;
            font-size:28px;
            color:#fff;
            background:green;
            margin-bottom:10px;
        }
        .content{
            height:300px;
            overflow:hidden;
        }
        ul li{
            list-style:none;
            height:40px;
            line-height:40px;
            text-align:left;
            padding-left:30px;
            font-size:18px;
            color:#333;
        }
        li:hover{color:#f91;}
    </style>
</head>
<body>
    <div class="box">
        <h3>信息列表</h3>
        <div class="content" id="content">
            <ul class="msg1" id="msg1">
                <li>考生走路甩手误将准考证扔河里 消防员跳河打捞</li>
                <li>20余省公务员省考笔试放榜 作弊者特别惨</li>
                <li>辟谷减肥：“大师”称意念发功可治病</li>
                <li>2017公务员考试34万人报名 平均24人抢1个职位</li>
                <li>钢票网与恒丰银行正式签订资金存管协议</li>
                <li>男子送交警“胡乱作为 以权谋私”锦旗 被拘5日</li>
                <li>美国会表决通过新驻华大使 月底有望赴华</li>
                <li>英国曼彻斯特发生爆炸 事发地正举行演唱会</li>
                <li>上海一家三口住9平米房间27年 儿子踩冰箱上床</li>
                <li>女讲师称女孩最好嫁妆是贞操:没人愿娶堕过胎的</li>
            </ul>
            <ul id="msg2"></ul>
        </div>
    </div>
    <script>
        var content=document.getElementById("content");
        var msg1=document.getElementById("msg1");
        var msg2=document.getElementById("msg2");
        var liHeight = 40;
        var speed = 50;//滚动的速度
        msg2.innerHTML=msg1.innerHTML;
        var delay = 2000;
        var time;
        content.scrollTop=0;
        function startScroll(){
            time = setInterval('upScroll()',speed);
            content.scrollTop++;
        };
        function upScroll(){
            if(content.scrollTop % liHeight==0){
                clearInterval(time);
                setTimeout(startScroll,delay);
            }else{
                content.scrollTop++;
                if(content.scrollTop >= content.scrollHeight/2){
                    content.scrollTop =0;
                }
            }
        }
        setTimeout(startScroll,delay)

    </script>
</body>
</html>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生