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

其他 2018-05-07 09:27:59 阅读次数: 3

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

一、使用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>

猜你喜欢

转载自blog.csdn.net/sinat_38328891/article/details/79593691
今日推荐
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
Spring Boot 3.0：未来企业应用开发的基石
Java 的 AI 前景光明
国内首个智能体生态大会！2024百度万象大会定档5月30日
开源一周年，青语言新版发布
深入浅出：大型语言模型（LLM）的全面解读
顶会ICLR2024论文Time-LLM：基于大语言模型的时间序列预测
周排行
第五讲：AbstractBean以及Ioc常见注解使用和自动装配
python-re模块学习-正则表达式
黑客攻击常用手段
正则表达式的规则
windwos::mutex
Spring中日志的使用（log4j）
Bootstra5 按钮处理
JVM内存结构-这一篇全部了解
Android的低级错误
Oracle中Cursor, A表a1字段值复制到B表b1字段
每日归档
更多
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022