超级弹幕！！！芜湖~起飞--_marqueelabel 弹幕-优快云博客

HTML弹幕-跑马灯标签（marquee）

跑马灯（marquee）介绍
- marquee

跑马灯（marquee）介绍

相信大家都一定都看过直播啦，就算你没有看过直播，那你也肯定看过电视剧或电影吧。那不管是看过直播还是电视剧，相信大家一定都知道“弹幕”这个东西,弹幕就是在你的屏幕中从右向左滚动的一段段字幕，而这个“弹幕”就可以用跑马灯做出来。下面我们就一起来看看该怎么实现弹幕的效果吧。

marquee

弹幕也就是跑马灯在html中的关键字就是“marquee”，我们只需要在body中输入marquee标签就行了。

<body>
    <marquee behavior="" direction="">
        芜湖~起飞---
    </marquee>
</body>

添加完这个标签后我们运行浏览器就可以在页面中看到我们输入的文字从右向左循环的滚动起来了，实现了弹幕的最基础效果。基本操作的marquee
我们在body中添加跑马灯marquee标签后可以看到marquee自带的拥有两个属性，而这两个属性则是分别控制跑马灯的滚动方式和滚动方向的。

behavior

marquee中自带的第一个属性behavior就是控制我们跑马灯的滚动方式，behavior的属性值有三个，分别是“scroll”，“slide”以及“alternate”，它们的表示的意思分别是“一直播放”，“只播放一次”和“来回弹动”，其中behavior自带的属性值就是“scroll”。

<body>
    <marquee behavior="slide" direction="">
        芜湖~起飞---
    </marquee>
</body>

<body>
    <marquee behavior="alternate" direction="">
        芜湖~起飞---
    </marquee>
</body>

direction

marquee中自带的第二个属性direction则是控制跑马灯滚动的方向。direction的属性值则有四个，分别是

自右向左–right
自左向右–left
自下向上–up
自上向下–down
当然direction也有一个自带的属性值就是“left”。其中在给directior设置“up”和“down”这两个属性值得时候有一点需要注意，那就是要在marquee标签中设置高度“height”属性，这样跑马灯才可以在垂直方向跑起来。

<body>
    <div>
        <marquee behavior="scroll" direction="up" height="800px">
            芜湖~起飞---
        </marquee>
    </div>
</body>

<body>
    <div>
        <marquee behavior="scroll" direction="down" height="800px">
            芜湖~起飞---
        </marquee>
    </div>
</body>

自上向下滚动的marquee

scrollamount

marquee中还有一个很常用的属性，那就是scrollamount，这个属性的作用则是控制跑马灯滚动的速度，scrollamount的属性值就是纯数字，不需要添加单位，其数值越大滚动的速率越快。

<body>
    <div>
        <marquee behavior="scroll" direction="down" scrollamount="500" height="800px">
            芜湖~起飞---
        </marquee>
    </div>
</body>

scrollamountd的属性值设置为500