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 = 0 : '';
    };
    let run = setInterval("scroll(scrollobj)",20);
    var jsStop = () => clearInterval(run) ;
    var jsStart = () => run=setInterval("scroll(scrollobj)",20);

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上外边距)

猜你喜欢