html跑馬燈/走馬燈效果

現跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實現，我們在需要出現跑馬燈效果的地方插入“<marquee>滾動的文字</marquee>”語句，它的效果如下所示：

滾動的文字

適當的運用<marquee>標簽的參數，可以表現出不同的效果，請看下面的幾個例子：

1、左右彈來彈去的跑馬燈

彈來彈去跑馬燈! 實現的方法就是在IE的標簽上稍微多加了幾個參數產生了更加豐富的變化。設置behavior=alternate表示雙向移動，direction= left表示運動方向向左。marquee的寬度可以使用絕對象素值，例如width=200等這個值限定了跑馬燈滾動的范圍。需要說明的是該效果在 Netscape下是看不到的。

源碼粘貼框：

<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>

２、跑的很快的跑馬燈

跑的很快跑馬燈!　只要在<marquee>標簽后面加上“scrollamount=15”即可,修改=后邊的數字參數即可限制文字移動的速度。

３、帶有超級鏈接的跑馬燈

帶超級鏈接的跑馬燈!點我試試？還有一條呢!點我試試？　實現的方法很簡單，把整個<marquee></marquee>語句包含在超鏈接中就行，你看看下面的代碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內容分別加上不同的鏈接，這樣的跑馬燈就可用來發布滾動新聞或是做站點導航了。

如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認是宋體，換體就要加代碼），只要在文字前加上就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號，如果想讓字體加粗，就再加上。

請看一下效果： 帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？上面效果的代碼碼如下：

<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk>帶有超鏈接的跑馬燈!點我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試？</a> </marquee>

以上幾個例子都是<marquee>標簽參數的應用，下面把所有可以利用的參數列在表中供你參考，不過還是要提醒你，<marquee>標簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。

參數用法介紹behavior=scroll, slide, alternate跑馬方式：循環繞行，只跑一次就停住，來回往復運動direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數：循環100次，如不寫默認為一直循環width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數越大越快scrolldelay=500跑馬延時：毫秒數，利用它可實現躍進式滾動hspace=20，vspace=20跑馬區域與其它區域間的空白大小bgcolor=#00FFCC跑馬區域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號STRONG跑馬燈文字加粗

你已經看到，盡管<marquee>參數不少，但畢竟不能實現復雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會采用JavaScript來實現跑馬燈。

在多個HTML頁面之間切換時持續播放背景音樂，可以使用JavaScript和localStorage來實現。這里有一個簡單的實現方案：

創建一個隱藏的音頻播放器: 在每個HTML頁面的<body>標簽內添加一個隱藏的音頻標簽，并設置自動播放和循環播放屬性。

使用JavaScript控制音頻狀態: 當頁面加載時，檢查localStorage中是否有音樂正在播放的狀態，如果有，則恢復播放。同時，當頁面離開時，記錄音樂的播放狀態到localStorage。

下面是一個簡化版的多頁面背景音樂連續播放的Demo示例。這個例子包含兩個HTML文件：index.html 和 page2.html。請確保你有相應的音頻文件（如music.mp3）并放置在與HTML文件相同的目錄下。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>首頁</title>
        <style>
            #backgroundMusic {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>首頁</h1>
        <p>這是首頁，背景音樂會持續播放。</p>
        <a href="page2.html">前往第二頁</a>

        <audio controls id="backgroundMusic" loop>
            <source src="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" type="audio/mpeg" />
            您的瀏覽器不支持 audio 元素。
        </audio>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var audio = document.getElementById('backgroundMusic')
                setupMusic(audio)
            })

            function setupMusic(audio) {
                var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0
                var isPlaying = localStorage.getItem('musicPlaying') === 'true'

                audio.currentTime = musicTime
                if (isPlaying) {
                    audio.play().catch(function (error) {
                        console.error('自動播放被阻止:', error)
                    })
                }

                audio.onplay = function () {
                    localStorage.setItem('musicPlaying', true)
                }
                audio.onpause = function () {
                    localStorage.setItem('musicPlaying', false)
                }
                audio.ontimeupdate = function () {
                    localStorage.setItem('musicTime', audio.currentTime)
                }
            }
        </script>
    </body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二頁</title>
    <style>
        #backgroundMusic { display: none; }
    </style>
</head>
<body>

<h1>第二頁</h1>
<p>切換到第二頁，背景音樂仍然連續播放。</p>
<a href="index.html">返回首頁</a>

<audio id="backgroundMusic" src="music.mp3" loop></audio>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var audio = document.getElementById('backgroundMusic');
        setupMusic(audio);
    });

    // 與index.html中相同的setupMusic函數，確保音樂播放邏輯一致
    function setupMusic(audio) {/*...函數內容與上文相同...*/}
</script>
</body>
</html>

在這個示例中，index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態和時間。當用戶在頁面間導航時，音樂將會無縫繼續播放，而不是重新開始。請根據實際需要調整音頻文件路徑和其他細節。

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音樂</title>

    <meta charset="utf-8">

<!--embed標簽寫在<head>里面的title標簽下-->
   

<embed src="C:\Users\Administrator\Desktop\告白氣球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 說明：

1、src：文件路徑。

2、hidden="true"表示隱藏音樂播放按鈕，相反使用hidden="false"表示開啟音樂播放按鈕。

3、autostart="true" 表示是打開網頁加載完后自動播放。

4、loop="true"表示 循環播放 如僅想播放一次則為：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白氣球.mp3">       

</audio>

<!-- 說明：

1、autoplay="autoplay"，則背景音樂將在音網頁打開后就自動馬上播放。

2、controls="controls"，則為了在頁面內顯示顯示控件，如播放按鈕。

3、"loop="loop"，則是為了使背景音樂重復播放。

4、preload="auto"，則音頻在頁面加載的同時進行加載，并預備播放。

5、src=""，即是在""內加入背景音樂的保存路徑，如：src=""。

注：若是想播放按鈕隱藏，則使用以下語句：

直接使用css 的display控制audio標簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在線咨詢

上一篇：2023 年學習 HTML 和 HTML5 的最佳書籍
下一篇：canvas實現的炫酷文字特效html頁面源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html跑馬燈/走馬燈效果

index.html

page2.html

您的項目需求