marquee标签(文字滚动)

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

小杨小杨-喜气洋洋

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

阅读量713

点赞数 1

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/m0_63607954/article/details/130155556

版权

本文介绍了HTML中的<marquee>标签，用于创建滚动效果。详细讲解了其属性，如direction、behavior、loop、scrollamount等，并提供了多个实例展示不同方向、速度和循环次数的滚动效果，还包括鼠标悬停时的交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小可爱们，来看看咱们的效果图吧

滚动实例

marquee简介
<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。
<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。

marquee标签属性说明

direction 表示滚动的方向，值可以是left，right，up，down，默认为left
behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数，值是正整数，默认为无限循环
scrollamount 表示运动速度，值是正整数，默认为6
scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

<html>
	<head>
    <meta charset="UTF-8">
	<title>js文字从右边到左滚动效果</title>
	</head>
	<body>
	<marquee width="100%"  behavior="scroll" scrollamount="16" bgcolor=" #000000" style="color: #fff;"
	onMouseOver="this.stop()" onMouseOut="this.start()" >
	        滚来滚去。。。
	</marquee>
	<marquee direction="up">我向上滚动</marquee>
    <hr>
    <marquee direction="down">我向下滚动</marquee>
    <hr>
    <marquee direction="left">我向左滚动</marquee>
    <hr>
    <marquee direction="right">我向右滚动</marquee>
    <hr>
    <marquee scrollamount="10">我速度很慢</marquee>
    <hr>
    <marquee scrollamount="100">我速度很快</marquee>
    <hr>
    <marquee scrolldelay="30">我小步前进。</marquee>
    <hr>
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
    <hr>
    <marquee loop="1">我滚动一次</marquee>
    <hr>
    <marquee loop="2">我滚动两次</marquee>
    <hr>
    <marquee loop="infinite">我无限循环滚动</marquee>
    <hr>
    <marquee behavior="alternate">我来回滚动</marquee>
    <hr>
    <marquee behavior="scroll">我单方向循环滚动</marquee>
    <hr>
    <marquee behavior="scroll" direction="up" height="30">我单方向向上循环滚动</marquee>
    <hr>
    <marquee behavior="slide">我只滚动一次</marquee>
    <hr>
    <marquee behavior="slide" direction="up">我向上只滚动一次</marquee>
    <hr>
    <marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
    <hr>
    <marquee width="600" height="50" bgcolor="red">我宽300像素，高30像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形边缘水平和垂直距周围各10像素。</marquee>
    <hr>
    <marquee width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形边缘水平和垂直距周围各50像素。</marquee>
    <hr>
    <marquee align="absbottom">绝对底部对齐</marquee>
    <hr>
    <marquee align="absmiddle">绝对中央对齐</marquee>
    <hr>
    <marquee align="baseline">底线对齐</marquee>
    <hr>
    <marquee align="bottom">底部对齐（默认）</marquee>
    <hr>
    <marquee align="left">左对齐</marquee>
    <hr>
    <marquee align="middle"> 中间对齐</marquee>
    <hr>
    <marquee align="right">右对齐</marquee>
    <hr>
    <marquee align="texttop">顶线对齐</marquee>
    <hr>
    <marquee align="top">顶部对齐</marquee>
	</body>
</html>