HTML的<marquee>标签

最新推荐文章于 2024-03-16 12:08:35 发布

~嘘~禁止想象~

最新推荐文章于 2024-03-16 12:08:35 发布

阅读量299

点赞数 1

本文链接：https://blog.csdn.net/weixin_45773503/article/details/105215058

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

HTML and CSS

32 篇文章 2 订阅

订阅专栏

在这里插入图片描述
在MDN上看到这句话，对我这个小白来说实在是有点难受，好 nb 的一个标签为啥废弃了呢，还想学会装装 b 呢，不管，不管，废弃了也要学。

属性	值	作用
behavior	scroll(默认值) / slide / alternate	设置文本在 marquee 元素内如何滚动
bgcolor	color / #…	设置背景颜色
direction	left(默认值) / right / up / down	设置 marquee 内文本滚动的方向
height	px / percent	以像素或百分比值设置高度
hspace	px / percent	设置水平边距
loop	−1 (默认值连续滚动) / n (数字)	设置 marquee 滚动的次数
scrollamount	6（默认值）	设置每次滚动时移动的长度（以像素为单位）
scrolldelay	85（默认值）	设置每次滚动时的时间间隔. 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并将其改为使用 60
truespeed	数字	默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。
vspace	px / percent	设置垂直边距
width	px / percent	设置宽度

栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 可以移动文字、图片、表格等 -->
    <marquee direction="up" behavior="alternate" scrollamount="50" scrolldelay="200" loop="2" width="400px" height="700px" bgcolor="red" hspace="" vspace="0">
        我<br> 最
        <br> 帅
    </marquee>
    <marquee direction="left" scrollamount="50" scrolldelay="1000">
        我<br> 最
        <br> 帅
    </marquee>
</body>

</html>

事件回调

onbounce
当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。
onfinish
当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。
onstart
当 marquee 开始滚动时触发。

方法

start
开始滚动 marquee。
stop
停止滚动 marquee。

MDN上的栗子：

<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>