marquee 跑馬燈

js實作跑馬燈

------------------------------------------html-----------------------------------------------
<p id="scrollobj" style="white-space:nowrap;overflow:hidden;width:300px;margin: auto;" onmouseover="jsStop()" onmouseout="jsStart()"><span style="padding-left:150px">Hello World！</span></p>

-----------------------------------------js代碼----------------------------------------------
let scrollobj = document.getElementById('scrollobj');
    let scroll = (obj) => {
        let tmp = (obj.scrollLeft)++;
        obj.scrollLeft == tmp ? obj.innerHTML += obj.innerHTML:'';
        obj.scrollLeft >= obj.firstChild.offsetWidth ? obj.scrollLeft =  : '';
    };
    let run = setInterval("scroll(scrollobj)",);
    var jsStop = () => clearInterval(run) ;
    var jsStart = () => run=setInterval("scroll(scrollobj)",);
           

marquee标簽實作

<div style="white-space:nowrap;overflow:hidden;width:300px;line-height:50px;margin: auto;">
    <marquee direction="left" behavior="scroll" scrollamount="5" scrolldelay="0" loop="-1" width="300" height="50" bgcolor="#0099FF" hspace="10" vspace="10" onMouseOut="this.start()" onMouseOver="this.stop()">
           

（1）指整個Marquee對齊方式; (2)behavior:設定滾動的方式: scroll:表示由一端滾動到另一端,會重複,缺陷是不能無縫滾動。 slide:表示由一段滾動到另一端,不會重複…

1.滾動方向direction（包括4個值：up、 down、 left和 right）

　　文法：< marquee direction=”滾動方向”>…

2.滾動方式behavior（scroll:循環滾動，預設效果； slide:隻滾動一次就停止； alternate:來回交替進行滾動）

　　文法：< marquee behavior=”滾動方式”>…

3.滾動速度scrollamount（滾動速度是設定每次滾動時移動的長度，以像素為機關）

　　文法：< marquee scrollamount=”5”>…

4.滾動延遲scrolldelay（設定滾動的時間間隔，機關是毫秒）

　　文法：< marquee scrolldelay=”100”>…

5.滾動循環loop（預設值是-1，滾動會不斷的循環下去）

　　文法：< marquee loop=”2”>…

6.滾動範圍width、height

7.滾動背景顔色bgcolor

8.空白空間hspace、vspace (類似margin-left和margin-top；hspace左外邊距；vspace上外邊距)