HTML - Marquee循环滚动+Audio音乐播放

    xiaoxiao2025-04-11  20

    Audio音乐播放(W3School):

    Marquee循环滚动:

    1.滚动方向direction(包括4个值:up、 down、 left和 right)

    语法:<marquee direction="滚动方向">...</marquee>

    2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

    语法:<marquee behavior="滚动方式">...</marquee>

    3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位,默认为6)

    语法:<marquee scrollamount="5">...</marquee>

    4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

    语法:<marquee scrolldelay="100">...</marquee>

    5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

    语法:<marquee loop="2">...</marquee>

    标签Position:



     

    HTML效果及源码:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网站日常</title> <audio src="BGM.mp3" autoplay="autoplay" controls="controls" preload="auto"></audio></br> <style type="text/css"> body{ background-image:url("110.png"); background-size:100%; no-repeat; } marquee{ position:fixed; width:100%; height:100%; } p{ color:green; font-size:30px; } </style> </head> <body> <marquee direction="up" behavior="scroll" scrollamount="2.0" onmouseover=stop() onmouseout=start()> <div style=" text-align:center;"> <p> 岁月的暖,漫过时间的河,抚过久闭的心扉,</br> 我在时光斑驳深处,聆听到花开的声音。 夏之忆,泣凋零,彼日花未名。 </br> 我们总是在注意错过太多,却不注意自己拥有多少。</br> 如果能不长大就好了啊 可是时光在身后挡住退路时光再美,怎如初见。 </br></br> 十年后的八月,我们还会相见, 我们总会以为那是永远。 </br> 殊不知有一天, 当我们回头时,才发现原来我们早已相隔天边。 </br></br> 花就算凋零了只剩下淡淡的香味,也会向着太阳散发出香气。</br> 与你在这最后的夏天,抹不去的思念,斜阳里的微笑,渐行渐远,</br> 六月的微风吹散你的泪光,深深的铭刻心间难以忘却我和你不一样,不做实现不了的梦。</br> 已知花意,不见其花。已见其花,未闻花名。</br> 替一朵花微笑,是一种繁华落尽后的淡泊与清宁。 </br></br> 如今只能在回忆里看着你,希望记忆中的你不要离我远去。</br> 夏天,那个夏天,还有那个夏天,即使经历无数次夏天,我还是说不出口。</br> 你不明白的,那种喜欢的人永远不会回头看你一眼的心情。 </br></br> 我很想见你,一直很想见到你,想呼唤你的名字,想向你道歉,想说喜欢你。</br> </p> </div> </marquee> </body> </html>

     

    最新回复(0)