marquee标签
本文由 小茗同学 发表于 2016-08-17 浏览(1103)
最后修改 2016-08-17 标签:html marquee

marquee

marquee是已经废弃、过时的标签,不推荐使用!在Chrome不同版本中有很多bug,如,Chrome45.0中动画执行完总是需要点一下页面才能继续,最新版的Chrome52.0则没有这个问题。

虽然已经过时,有时候还是不得已用到,这里简单对几个属性做一下介绍。

behavior

可用的值为scroll(滚动)、slide(滑动)、alternate(改变,类似于光学的反射路径),如果没有指定值,默认是scroll

direction

设置方向,可用的值为left、right、up、down,如果没有指定值,默认是left

scrollamount

控制速度

scrolldelay

延时

示例

完整测试代码如下:

<h1>兼容性说明:</h1>
<p>marquee是已经废弃的标签,不推荐使用!在Chrome不同版本中有很多bug,如,Chrome45.0中动画执行完总是需要点一下页面才能继续,最新版的Chrome52.0则没有这个问题。</p>

<h1>默认:</h1>
<marquee>人类同处一个地球,“地球村”的每个成员,如何携手共进?</marquee>

<h1>来回滚动:</h1>
<marquee behavior="alternate" direction="left" scrollamount="10" scrolldelay="50">人类同处一个地球,“地球村”的每个成员,如何携手共进?</marquee>

<h1>循环滚动:</h1>
<marquee behavior="scroll" direction="right" scrollamount="10" scrolldelay="50">人类同处一个地球,“地球村”的每个成员,如何携手共进?</marquee>

<h1>右下往上滚动:</h1>
<marquee behavior="scroll" direction="up" scrollamount="10" scrolldelay="50" style="height:200px;background:#ccc;">人类同处一个地球,“地球村”的每个成员,如何携手共进?</marquee>

<h1>会反弹的文字:</h1>
<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid 2px black;">
    <marquee behavior="alternate" width="250" >这个文本会反弹哦</marquee>
</marquee>