html5에서 marquee 태그를 사용하는 방법
- 青灯夜游원래의
- 2022-08-25 17:51:202370검색
HTML5에서 marquee 태그는 스크롤되는 텍스트나 이미지를 만드는 데 사용됩니다. ")" 구문을 사용하면 태그 쌍에 포함된 콘텐츠를 가로 또는 가로로 스크롤할 수 있습니다. 웹 페이지에서 수직으로 아래로 스크롤합니다. 속성을 설정하면 텍스트가 컨테이너 가장자리에 도달할 때 발생하는 상황을 제어할 수 있습니다. 예를 들어 동작 속성은 스크롤 방법(순환 스크롤, 한 번만 스크롤한 후 중지)을 제어할 수 있습니다. 앞뒤로 번갈아 스크롤).
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML에서 marquee는 "스크롤"을 의미합니다. 움직이는 텍스트(
이 태그는 웹페이지에서 텍스트나 이미지를 가로 또는 세로로 아래로 스크롤하는 데 사용됩니다. 해당 속성을 사용하여 텍스트가 컨테이너 가장자리에 도달할 때 발생하는 상황을 제어할 수 있습니다.
marquee 스크롤 텍스트 라벨
페이지에는 동적 텍스트, 동적 이미지, 오디오 및 비디오 등과 같은 많은 멀티미디어 요소가 있으며 가장 간단한 것은 HTML의 경우 하늘 높이 스크롤되는 텍스트입니다. 스크롤 텍스트를 추가하려면 marquee 태그를 사용해야 합니다. marquee标签。
我们先来看一下最简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
</head>
<body style="background: black;padding: 20px;">
<marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom PHPCN!</span></marquee>
</body>
</html>为了显示效果更明显，这里将页面背景设置为黑色，将滚动文字设置为白色，显示效果如图：
这样我们就实现了一个最简单的滚动文字，在滚动文字中还有一些属性用于控制滚动方向、滚动速度等，下面我们就来看一下几个比较常用的属性。
direction 滚动方向属性
默认情况下，文字从右向左滚动，实际应用中，我们可能需要改变方向，就可以通过该属性来设置，该属性可用值有：up，down，left，right，分别表示向上、向下、向左和向右滚动。
示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee direction="up">UP</marquee>
<marquee direction="down">DOWN</marquee>
<marquee direction="left">LEFT</marquee>
<marquee direction="right">RIGHT</marquee>
</body>
</html>behavior 滚动方式属性
通过behavior 可以设置滚动方式，如往复运动等。behavior可用值有：scroll，slide，alternate
가장 간단한 예를 먼저 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee behavior="scroll">scroll</marquee>
<marquee behavior="slide">slide</marquee>
<marquee behavior="alternate">alternate</marquee>
</body>
</html>표시 효과를 더 명확하게 하기 위해 여기에서는 페이지 배경을 검은색으로 설정하고 스크롤 텍스트를 흰색으로 설정합니다. 표시 효과는 아래와 같습니다. 
In 이 방법으로 우리는 가장 간단한 스크롤 텍스트를 얻었습니다. 스크롤 방향, 스크롤 속도 등을 제어하는 데 사용되는 스크롤 텍스트의 몇 가지 속성이 있습니다. 더 일반적으로 사용되는 속성 중 일부를 살펴보겠습니다. 방향 스크롤 방향 속성
기본적으로 텍스트는 오른쪽에서 왼쪽으로 스크롤됩니다. 실제 애플리케이션에서는 방향을 변경해야 할 수도 있으므로 이 속성을 통해 설정할 수 있습니다. 사용 가능한 값은 up, down, left, right이며 각각 위, 아래, 왼쪽을 나타냅니다. 그리고 오른쪽으로 스크롤하세요.
예는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee scrolldelay="800" scrollamount="100">Welcom PHPCN!</marquee>
</body>
</html>
동작 스크롤 모드 속성
동작을 통해 왕복운동 등 스크롤 모드를 설정할 수 있습니다. 동작에 사용할 수 있는 값은 scroll, slide 및 alternate이며 각각 순환 스크롤, 한 번만 스크롤한 후 중지를 나타냅니다. 앞뒤로 교대로 스크롤합니다. 예는 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>marquee</title>
<style>
body {
background: black;
padding: 20px;
}
marquee {
font-weight: bolder;
font-size: 40px;
color: white;
}
</style>
</head>
<body>
<marquee loop="2">Welcom CSDN!</marquee>
</body>
</html>
scroll, slide 및 alternate이며 각각 순환 스크롤, 한 번만 스크롤한 후 중지를 나타냅니다. 앞뒤로 교대로 스크롤합니다. 예는 다음과 같습니다: scrolldelay 스크롤 지연 속성 및 scrollamount 스크롤 속도 속성
텍스트 스크롤 시간 간격은 scrolldelay 속성을 통해 설정할 수 있습니다. 스크롤 지연의 시간 간격 단위는 밀리초입니다. 이 시간 간격은 두 스크롤 단계 사이의 시간 간격으로 설정됩니다. 시간이 너무 길면 정지 및 이동 효과가 발생합니다. scrollamount는 스크롤 단계 크기를 설정하는 데 사용됩니다. 예는 다음과 같습니다:
rrreee🎜🎜🎜🎜🎜loop 스크롤 루프 속성🎜🎜🎜몇 번 후에 텍스트 스크롤을 중지하려면 루프 속성을 사용할 수 있습니다. 🎜🎜예는 다음과 같습니다: 🎜rrreee🎜🎜🎜🎜 (동영상 공유 학습: 🎜웹 프론트엔드 시작하기🎜)🎜위 내용은 html5에서 marquee 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!