弹幕标签

1，注意弹幕标签marquee，现在一些浏览器是不支持的
2，弹幕标签也叫跑马灯

marquee格式及其含有的属性

1.基本格式

如下：

<marquee></marquee>

2.一些属性

1，direction属性：表示的是弹幕行走的方向，如下面实现向左行走

<marquee direction="left">这波操作6</marquee>

其中direction还可以设置值为up right down，可以自己修改演示。

添加width和height属性可以设置滚动的宽度和高度：如下设置高度为300px

<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>

2，behavior属性：
behavior属性可以取多个值，如：alternate scroll slide 等
若取值为alternate则表示弹幕从屏幕一侧跑到屏幕另外一侧时马上再向相反方向弹回去。
如下：

<marquee behavior="alternate">我从屏幕一侧跑到另一侧</marquee>

若取值为scroll表示弹幕从一侧跑到另一侧后又重新从一侧跑到另外一侧，如下：

<marquee behavior="scroll">我单方向循环滚动</marquee>

若取值为slide表示只向单方向行走一次，走到另外一侧时就停下，如下：

<marquee behavior="slide">我单方向走一次了</marquee>

3，scrollamount属性
表示运动的速度快慢，默认取值为6，设置的越大则跑的越快，如下：

<marquee scrollamount="30">我速度快</marquee>

4，scrolldelay属性
表示停顿的时间，单位为毫秒如下：

<marquee scrolldelay="100" scrollamount="100">速度被抑制了</marquee>

5，bgcolor
表示滚动区域的颜色，如下：

 <marquee direction="left" bgcolor="red">这波操作6</marquee>

运行如图：

6，hspace属性
表示的是走到离边界还有多远的距离就回到开始重新走动。
如下：

<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee>

其中的值的单位是px，运行后可以发现弹幕走到离左边边界还有一段距离时就重新滚动。
7，onMouseOut="this.start()"属性
表示鼠标放到这里时则弹幕重新从开始地方行走。如下

<marquee onMouseOut="this.start()">点击这里</marquee>

可以看见，鼠标移动到弹幕位置再拿开时，弹幕重新开始。
8，onMouseOut="this.start()"属性
表示的是鼠标放在弹幕位置并且拿开时，弹幕保持停止状态，不再走。如下：

<marquee onMouseOut="this.stop()">点击这里</marquee>

运行鼠标放在弹幕处可以看到弹幕不再动。
9，loop属性
loop属性表示的是弹幕循环的次数，默认是无限次。如下：

<marquee loop="2">循环出现2次</marquee>

运行后可以看到弹幕滚动2次后就再也没有出现了。

综合练习效果：

代码：

 <marquee direction="left" bgcolor="red">这波操作6</marquee>
<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="300">我改单方向向上循环滚动</marquee>
<marquee behavior="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
<marquee scrollamount="100">我速度很快.</marquee>
<marquee scrollamount="30" hspace="100">离边界还有100px就重新循环</marquee>
<marquee scrollamount="30" vspace="100">离边界还有100px就重新循环</marquee>
<marquee scrolldelay="30">我小步前进。</marquee>
<marquee onMouseOut="this.start()">鼠标移动到这里重新开始弹幕</marquee>
<marquee onMouseOut="this.stop()">鼠标移动到这里弹幕停止</marquee>
<marquee loop="2" scrollamount="30">循环出现2次</marquee>
<marquee scrolldelay="100" scrollamount="100">我大步前进。</marquee>

运行效果如下：

喜欢的话点个赞吧，谢谢

前端：弹幕标签用法详细介绍（跑马灯）相关推荐

html调用文章标题,HTML中文章标题标签的详细介绍
昨天说道了我的第一个网页,今天接着继续带大家深入,前期学习千万不要用代码工具哦!那样就少了深入了解的机会了哦!一.大家都知道文章会有各种标题,网页其也跟文章差不多也有专门来写标题的元素. (1). h ...
script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
html中b标签去加粗,html中b加粗标签的详细介绍
html作为网页最基础的语言是每一个站长必学的语言,今天我们就来了解字体文本标签 b,/b标签的用法及其语义. 字体文本标签讲解标签字体标签定义字体的显示效果,有些标签它有独自的语义. 标签感谢您 ...
【MADDPG（MPE）——环境配置与用法详细介绍（多智能体强化学习）)】
MADDPG(MPE)--环境配置与用法详细介绍(多智能体强化学习) MADDPG(MPE) 介绍 MPE环境安装教程前期准备 MPE 安装包介绍 MPE 安装环境要求开始安装环境测试 MPE环 ...
html的注释标签是什么,html 注释标签的详细介绍
在我们写 html 代码的时候,往往需要进行说明该行代码或该段代码是用来做什么的.这个时候我们就需要用到 html 注释标签了,html 注释标签有哪些呢?html 注释标签和其它语言的注释不一样.比 ...
html文档主体的根标签,HTML详细介绍（基础标签篇）
今天下午阳光明媚,北京少有的好天气.正好有机会总结HTML标签,下面就详细介绍一下基础的标签的用法及相关的属性.关于基础篇的总结部分点击这里. 基础标签的内容 :定义,声明文档类型 :html文档的根 ...
php中sisson用法,详细介绍php中session的用法
PHP中的session默认情况下是使用客户端的Cookie.当客户端的Cookie被禁用时,会自动通过Query_String来传递. Php处理会话的函数一共有11个,我们详细介绍一下将要用到几个 ...
数据库having的用法详细介绍
转自:微点阅读 https://www.weidianyuedu.com 数据库having的用法的用法你知道吗?下面微点阅读小编就跟你们详细介绍下数据库having的用法的用法,希望对你们有用. ...
Nacos注册中心的部署与用法详细介绍
一.什么是注册中心: 我们知道微服务彼此间独立部署.具有清晰的边界,服务间通过远程调用来构建复杂的业务功能.而服务册中心在微服务项目中扮演着非常重要的角色,那么注册中心又是什么,使用服务注册中心可以解 ...

前端：弹幕标签用法详细介绍（跑马灯）