Marquee 已经废弃的元素。

能用 transition 和 anmiation,请尽量不要使用这个。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
interface HTMLMarqueeElement : HTMLElement {
           attribute DOMString behavior;
           attribute DOMString bgColor;
           attribute DOMString direction;
           attribute DOMString height;
           attribute unsigned long hspace;
           attribute long loop;
           attribute unsigned long scrollAmount;
           attribute unsigned long scrollDelay;
           attribute DOMString trueSpeed;
           attribute unsigned long vspace;
           attribute DOMString width;

           attribute Function onbounce;
           attribute Function onfinish;
           attribute Function onstart;

  void start();
  void stop();
};

marquee 可以通过自身的 api 开启/开始( start() )和关闭/暂停( stop() )?

如下测试:

--> start & stop 控制暂停和开始 <--

marquee test start & stop

--> behavior: scroll, slide, alternate <--

marquee behavior scroll(default) marquee behavior slide marquee behavior alternate


--> direction: left, right, up, down <--

marquee direction left(default) marquee direction right marquee direction up marquee direction down


--> scroll interval(default: 85 ms) <--

scroll interval(default: 85) scroll interval: 200


--> treespeed: 影响 scrolldelay 属性,默认:false <--

--> 1. 当 treespeed = false, scrolldelay < 60 时会被设置成 60 <--

--> 2. 当 treespeed = true, scrolldelay 取设置的值,等于是 false 的时候会自动调整 scrolldelay <--

--> 如下现象, 好像没啥用, m1 和 m4 速度是同步的 <--

m1: scroll interval + treespeed(false): 30 m2: scroll interval + treespeed(false): 60 m3: scroll interval + treespeed(false): 120 m4: scroll interval + treespeed(true ): 30 m5: scroll interval + treespeed(true ): 60 m6: scroll interval + treespeed(true ): 120


--> scrollamount: marquee scroll distance, 每次移动的距离,默认:6px/ms <--

scrollamount(default: 6px) scrollamount: 12px


--> loop: marquee loop count, 如果 < 1 则用默认值 -1,否则用指定的数字 <--

--> loop index: 完成一次,自动 +1 当 >= loop count 时候滚动停止,并触发 onfinish <--

--> 如果 loop index >= loop count 时候滚动停止,并触发 onfinish <--

--> 如果 behavior=alternate,loop index >= loop count 时触发 onbounce 事件 <--

--> 否则触发 onstart 事件(loop index < loop count) <--

--> start,bounce,finish 在 chrome 上都触发不了 <--

--> stackover 上说是最新的版不再维护这个标签的原因 <--

--> 但是 Firefox 上测试了下,三个事件都可以正常触发 <--

ml1, loop: -1, behavior: alternate, onbounce 没用? ml1, loop: -1

info-ml1:


ml2, loop: 0

info-ml2:


ml3, loop: 1

info-ml3:


ml4, loop: 2

info-ml4:


loop index = 0

下表的属性与DOM属性对应关系:

marquee attributeDOM attribute
behaviorbehavior
directiondirection
heightheight
widthwidth
hspacehspace
vspacevspace
bgcolorbgColor
scrollamountscrollAmount
scrolldelayscrollDelay
truespeedtrueSpeed

--> vspace: 垂直距离,hspace: 水平距离 <--

vspace: 20px
hspace: 50px