HTML에서 스크롤 텍스트를 만드는 예제 코드-HTML 튜토리얼-php.cn

HTML에서 스크롤 텍스트를 만드는 예제 코드

怪我咯

풀어 주다： 2017-05-07 11:57:56

원래의

6044명이 탐색했습니다.

이 섹션에서 저자는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어할 수 있는 HTML 코드의 특수 태그에 대해 설명합니다. 스크롤 텍스트 만들기 본 장의 선행연구를 통해 독자들은 다양한 단락 텍스트의 표시 방식을 잘 제어할 수 있었지만, 어떻게 설정하더라도 텍스트는 정적이다. 이 섹션
이 섹션에서 저자는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어할 수 있는 HTML 코드의 특수 태그에 대해 설명합니다.
스크롤 텍스트 만들기
이 장의 선행 연구를 통해 독자들은 다양한 단락 텍스트의 표시 방법을 잘 제어할 수 있었지만 어떻게 설정하더라도 텍스트는 정적입니다. 이 섹션에서 저자는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어할 수 있는 HTML 코드의 특수 태그에 대해 설명합니다.
4.3.1 텍스트 스크롤 설정
HTML 기술에서 텍스트를 스크롤하는 방법은 이중 태그 를 사용하는 것입니다. HTML 코드에서는 범위의 텍스트를 스크롤할 수 있습니다. 기본값은 오른쪽에서 왼쪽으로 순환 스크롤입니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 mar.htm으로 지정한 다음 코드 4.15와 같이 코드를 작성합니다.

코드 4.15 텍스트 스크롤 설정: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="5" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>
</body>
</html>

로그인 후 복사

브라우저 주소 표시줄에 http://localhost/mar.htm을 입력하면 브라우징 효과가 표시됩니다. 그림 4.15에 나와 있습니다.

그림 4.15 텍스트 스크롤의 기본 형식 설정
그림 4.15에서 너비가 설정되지 않은 경우 태그가 전용 라인을 차지합니다.
4.3.2 텍스트 스크롤 방향 설정

<marquee></marquee>标签的direction属性用于设置内容滚动方向，属性值有left、right、up、down，分别代表向左、向右、向上、向下，例如以下代码：
<marquee direction="left">做人要厚道</marquee>
<marquee direction="right">做人要厚道</marquee>
<marquee direction="up">做人要厚道</marquee>
<marquee direction="down">做人要厚道</marquee>

로그인 후 복사

4.3.3 텍스트 스크롤 속도 및 형식 설정
텍스트 설정 태그를 스크롤하는 경우 해당 속성은 다음과 같습니다.
— 태그의 scrollamount 속성은 콘텐츠 스크롤 속도를 설정하는 데 사용됩니다.
— 태그의 동작 속성은 콘텐츠 스크롤 방법을 설정하는 데 사용됩니다. 기본값은 순환 스크롤입니다. 주기적으로 나갑니다. 해당 값이 슬라이드이면 콘텐츠가 한 번 스크롤을 중지하고 반복되지 않습니다. 스크롤 주기 수를 설정하는 루프 속성도 있으며, 기본값은 제한이 없습니다.
— 태그의 scrolldelay 속성은 콘텐츠 스크롤 시간 간격을 설정하는 데 사용됩니다.
— 태그의 bgcolor 속성은 콘텐츠 스크롤 배경색을 설정하는 데 사용됩니다(본문의 배경색 설정과 유사).
— 태그의 너비 속성은 콘텐츠 스크롤 배경의 너비를 설정하는 데 사용됩니다.
— 태그의 높이 속성은 콘텐츠 스크롤 배경의 높이를 설정하는 데 사용됩니다.
mar.htm 웹페이지 파일을 수정하고 코드 4.16과 같이 코드를 작성합니다.

코드 4.16 텍스트 스크롤 설정: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="3" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">做人要厚道</marquee>
文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10" behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up" bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>
</font>
</body>
</html>

로그인 후 복사

브라우저 주소 표시줄에 http://localhost/mar.htm을 입력하면 브라우징 효과가 표시됩니다. 그림 4.16에 나와 있습니다.

그림 4.16 다양한 형태의 텍스트 스크롤
의 다양한 속성 덕분에 스크롤 텍스트를 만드는 것이 매우 편리해졌습니다