찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >스크롤 텍스트를 생성하는 HTML 코드

스크롤 텍스트를 생성하는 HTML 코드

不言
不言원래의
2018-05-07 16:13:015260검색

이 글에서는 스크롤 텍스트를 생성하는 HTML 코드를 주로 소개합니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

이 섹션에서는 HTML의 특수 태그에 대해 설명합니다. 웹 페이지를 만들 수 있는 코드입니다. 텍스트의 텍스트가 스크롤되고 스크롤 속성이 제어될 수 있습니다.                   ​

스크롤 텍스트 만들기 본 장의 선행연구를 통해 독자들은 다양한 단락 텍스트의 표시 방식을 잘 제어할 수 있었지만, 어떻게 설정하더라도 텍스트는 정적이다.

이 섹션에서 저자는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어할 수 있는 HTML 코드의 특수 태그에 대해 설명합니다. ​ ​ ​

스크롤 텍스트 만들기
이 장의 이전 연구를 통해 독자들은 다양한 단락 텍스트의 표시 방법을 잘 제어할 수 있었지만 어떻게 설정하더라도 텍스트는 정적입니다. 이 섹션에서 저자는 웹 페이지의 텍스트를 스크롤하고 스크롤 속성을 제어할 수 있는 HTML 코드의 특수 태그에 대해 설명합니다.
4.3.1 텍스트 스크롤 설정
HTML 기술에서 텍스트를 스크롤하는 방법은 이중 태그 ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b를 사용하는 것입니다. HTML 코드에서는 범위의 텍스트를 스크롤할 수 있습니다. 기본값은 오른쪽에서 왼쪽으로 순환 스크롤입니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 mar.htm으로 지정한 다음 코드 4.15와 같이 코드를 작성합니다.
Code 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에서 너비가 설정되지 않은 경우 ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 레이블이 독점 라인을 차지합니다.
4.3.2 텍스트 스크롤 방향 설정
ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 방향 속성은 콘텐츠 스크롤 방향을 설정하는 데 사용됩니다. 속성 값은 왼쪽, 오른쪽, 위쪽입니다. 및 down은 각각 왼쪽과 오른쪽을 나타냅니다. 예를 들어 다음 코드는
5df5b1e0f494e30d597fe5c4c9a2c6a6친절하고 친절하세요7204e33a7a23f6efcc788532e245c31b
< ;marquee Direction="up">친절하고 친절하세요7204e33a7a23f6efcc788532e245c31b
008da1a6901990d3096a3855edda98d5친절하고 친절하세요7204e33a7a23f6efcc788532e245c31b
4.3 .3 텍스트 스크롤 속도 및 형식 설정
텍스트 스크롤을 설정하려면 ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그를 사용하세요.
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 scrollamount 속성은 콘텐츠 스크롤 속도를 설정하는 데 사용됩니다.
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 동작 속성은 콘텐츠 스크롤 방법을 설정하는 데 사용됩니다. 기본값은 순환 스크롤입니다. 순환적인 방식. 해당 값이 슬라이드이면 콘텐츠가 한 번 스크롤을 중지하고 반복되지 않습니다. 스크롤 주기 수를 설정하는 루프 속성도 있으며, 기본값은 제한이 없습니다.
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 scrolldelay 속성은 콘텐츠 스크롤 시간 간격을 설정하는 데 사용됩니다.
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 bgcolor 속성은 콘텐츠 스크롤 배경색을 설정하는 데 사용됩니다(본문의 배경색 설정과 유사).
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 너비 속성은 콘텐츠 스크롤 배경 너비를 설정하는 데 사용됩니다.
— ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b 태그의 높이 속성은 콘텐츠 스크롤 배경 높이를 설정하는 데 사용됩니다.
mar.htm 웹페이지 파일을 수정하고 코드 4.16과 같이 코드를 작성합니다.

Code 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 텍스트 스크롤의 다양한 형태
ed126914ed1419bab26abf7cf307b7b97204e33a7a23f6efcc788532e245c31b의 다양한 속성은 다음 JavaScript 학습에서 텍스트 스크롤을 매우 편리하게 만들 수 있습니다. 태그의 동적 행동 학습.

관련 권장 사항:

간단한 장바구니를 구현하는 HTML 코드


위 내용은 스크롤 텍스트를 생성하는 HTML 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML로 간단하고 아름다운 로그인 페이지 만들기다음 기사：HTML로 간단하고 아름다운 로그인 페이지 만들기

관련 기사

더보기