前端常用效果——信息滾動效果

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

前端常用效果——信息滾動效果

前端常用效果——信息滾動效果

一、使用marquee標籤實現信息滾動

1、marquee屬性

1.1、behavior——設置文本在marquee元素內滾動的方式。

1.2、direction——設置marquee內文本滾動的方向。

1.3、loop——設置滾動的次數。如果未指定值，默認值爲 −1，表示連續滾動。

1.4、scrollamount——設置每次滾動時移動的長度（以像素爲單位），默認值爲6。

1.5、scrolldelay——設置每次滾動時的時間間隔（以毫秒爲單位）。

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。

二、使用javascript實現文字信息無縫滾動

三、使用javascript實現文字信息無縫滾動鼠標懸停效果添加

四、使用javascript實現文字信息間歇性滾動

4.1、setTimeout()

4.2、setInterval()

4.3、clearTimeout()

4.4、clearInterval()

4.5、實現間歇性信息滾動效果

SQL優化-20231016

vue.js——基礎篇之vue組件

vuejs實戰——PC端

Node.js（三）——Express

vue實戰——vue中發送AJAX請求

JavaScript-面向對象與原型

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結