html5에서 marquee 태그를 사용하는 방법-프런트엔드 Q&A-php.cn

html5에서 marquee 태그를 사용하는 방법

青灯夜游

풀어 주다： 2022-08-25 17:51:20

원래의

2291명이 탐색했습니다.

HTML5에서 marquee 태그는 스크롤되는 텍스트나 이미지를 만드는 데 사용됩니다. "text or image)" 구문을 사용하면 태그 쌍에 포함된 콘텐츠를 가로 또는 가로로 스크롤할 수 있습니다. 웹 페이지에서 수직으로 아래로 스크롤합니다. 속성을 설정하면 텍스트가 컨테이너 가장자리에 도달할 때 발생하는 상황을 제어할 수 있습니다. 예를 들어 동작 속성은 스크롤 방법(순환 스크롤, 한 번만 스크롤한 후 중지)을 제어할 수 있습니다. 앞뒤로 번갈아 스크롤).

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>

로그인 후 복사

为了显示效果更明显，这里将页面背景设置为黑色，将滚动文字设置为白色，显示效果如图：

html5에서 marquee 태그를 사용하는 방법

这样我们就实现了一个最简单的滚动文字，在滚动文字中还有一些属性用于控制滚动方向、滚动速度等，下面我们就来看一下几个比较常用的属性。

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>

로그인 후 복사

html5에서 marquee 태그를 사용하는 방법

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>

로그인 후 복사

표시 효과를 더 명확하게 하기 위해 여기에서는 페이지 배경을 검은색으로 설정하고 스크롤 텍스트를 흰색으로 설정합니다. 표시 효과는 아래와 같습니다. html5에서 marquee 태그를 사용하는 방법

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>

로그인 후 복사

scrolldelay 스크롤 지연 속성 및 scrollamount 스크롤 속도 속성 html5에서 marquee 태그를 사용하는 방법

텍스트 스크롤 시간 간격은 scrolldelay 속성을 통해 설정할 수 있습니다. 스크롤 지연의 시간 간격 단위는 밀리초입니다. 이 시간 간격은 두 스크롤 단계 사이의 시간 간격으로 설정됩니다. 시간이 너무 길면 정지 및 이동 효과가 발생합니다. scrollamount는 스크롤 단계 크기를 설정하는 데 사용됩니다. 예는 다음과 같습니다:

rrreee🎜🎜🎜🎜🎜loop 스크롤 루프 속성🎜🎜🎜몇 번 후에 텍스트 스크롤을 중지하려면 루프 속성을 사용할 수 있습니다. 🎜🎜예는 다음과 같습니다: 🎜rrreee🎜🎜🎜🎜 (동영상 공유 학습: 🎜웹 프론트엔드 시작하기🎜)🎜

위 내용은 html5에서 marquee 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!