html跑馬燈/走馬燈效果

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

滾動(dòng)的文字

適當(dāng)?shù)倪\(yùn)用<marquee>標(biāo)簽的參數(shù)，可以表現(xiàn)出不同的效果，請(qǐng)看下面的幾個(gè)例子：

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

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

源碼粘貼框：

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

２、跑的很快的跑馬燈

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

３、帶有超級(jí)鏈接的跑馬燈

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

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

請(qǐng)看一下效果： 帶超級(jí)鏈接的跑馬燈!點(diǎn)我試試？ 還有一條呢!點(diǎn)我試試？上面效果的代碼碼如下：

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

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

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

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

在多個(gè)HTML頁面之間切換時(shí)持續(xù)播放背景音樂，可以使用JavaScript和localStorage來實(shí)現(xiàn)。這里有一個(gè)簡單的實(shí)現(xiàn)方案：

創(chuàng)建一個(gè)隱藏的音頻播放器: 在每個(gè)HTML頁面的<body>標(biāo)簽內(nèi)添加一個(gè)隱藏的音頻標(biāo)簽，并設(shè)置自動(dòng)播放和循環(huán)播放屬性。

使用JavaScript控制音頻狀態(tài): 當(dāng)頁面加載時(shí)，檢查localStorage中是否有音樂正在播放的狀態(tài)，如果有，則恢復(fù)播放。同時(shí)，當(dāng)頁面離開時(shí)，記錄音樂的播放狀態(tài)到localStorage。

下面是一個(gè)簡化版的多頁面背景音樂連續(xù)播放的Demo示例。這個(gè)例子包含兩個(gè)HTML文件：index.html 和 page2.html。請(qǐng)確保你有相應(yīng)的音頻文件（如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>這是首頁，背景音樂會(huì)持續(xù)播放。</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('自動(dòng)播放被阻止:', 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>切換到第二頁，背景音樂仍然連續(xù)播放。</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函數(shù)，確保音樂播放邏輯一致
    function setupMusic(audio) {/*...函數(shù)內(nèi)容與上文相同...*/}
</script>
</body>
</html>

在這個(gè)示例中，index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態(tài)和時(shí)間。當(dāng)用戶在頁面間導(dǎo)航時(shí)，音樂將會(huì)無縫繼續(xù)播放，而不是重新開始。請(qǐng)根據(jù)實(shí)際需要調(diào)整音頻文件路徑和其他細(xì)節(jié)。

<!DOCTYPE html>

<html>

<head>

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

    <meta charset="utf-8">

<!--embed標(biāo)簽寫在<head>里面的title標(biāo)簽下-->
   

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


<!-- 說明：

1、src：文件路徑。

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

3、autostart="true" 表示是打開網(wǎng)頁加載完后自動(dòng)播放。

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

</head>

<body>

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

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

</audio>

<!-- 說明：

1、autoplay="autoplay"，則背景音樂將在音網(wǎng)頁打開后就自動(dòng)馬上播放。

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

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

4、preload="auto"，則音頻在頁面加載的同時(shí)進(jìn)行加載，并預(yù)備播放。

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

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

直接使用css 的display控制audio標(biāo)簽的顯示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在線咨詢

上一篇：2023 年學(xué)習(xí) HTML 和 HTML5 的最佳書籍
下一篇：canvas實(shí)現(xiàn)的炫酷文字特效html頁面源碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html跑馬燈/走馬燈效果

index.html

page2.html

您的項(xiàng)目需求