지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML의 marquee 속성에 대한 자세한 설명

高洛峰
풀어 주다： 2017-02-09 17:45:52
원래의
1762명이 탐색했습니다.

이 글은 주로 HTML의 marquee 속성에 대한 관련 정보를 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.

이 태그는 HTML3.2에 포함되지 않고 MSIE3 이상의 커널만 지원하므로 IE 코어가 아닌 브라우저(예: Netscape)를 사용하면 다음과 같은 흥미로운 효과 중 일부가 표시되지 않을 수 있습니다.

이 태그는 컨테이너 태그입니다

구문: 

<marquee></marquee>
로그인 후 복사

다음은 가장 간단한 예입니다.

코드는 다음과 같습니다.

<marquee><font size=+3 color=red>Hello, World</font></marquee>
로그인 후 복사

다음 두 가지 자주 사용되는 이벤트:

onMouseOut="this.start()": 마우스가 해당 영역 밖으로 이동할 때 계속 스크롤하도록 설정하는 데 사용됩니다.

onMouseOver="this .stop()": 해당 영역으로 이동할 때 마우스 스크롤을 중지하도록 설정하는 데 사용됩니다.

코드는 다음과 같습니다.

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</marquee>
로그인 후 복사

이것은 완전한 예는 다음과 같습니다.

코드는 다음과 같습니다. 

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
这是一个完整的例子
</marquee>
로그인 후 복사

이 태그는 최대 11개의 속성을 지원합니다.

align

태그 내용 정렬 설정

absbottom: 절대 하단 정렬(g, p, 등)
absmiddle: 절대 중앙 정렬
baseline: 아래쪽 줄 정렬
bottom: 아래쪽 정렬(기본값)
왼쪽: 왼쪽 정렬
middle: 중간 정렬
right: 오른쪽 정렬
texttop: 위쪽 줄 정렬
top: 위쪽 정렬

코드는 다음과 같습니다.

<marquee align="absbottom">align="absbottom"：绝对底部对齐（与g、p等字母的最下端对齐）。 </marquee>
<marquee align="absmiddle">align="absmiddle"： 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline"： 底线对齐。 </marquee>
<marquee align="bottom">align="bottom"： 底部对齐（默认）。 </marquee>
<marquee align="left">align="left"： 左对齐。 </marquee>
<marquee align="middle">align="middle"： 中间对齐。 </marquee>
<marquee align="right">align="right"： 右对齐。 </marquee>
<marquee align="texttop">align="texttop"： 顶线对齐。 </marquee>
<marquee align="top">align="top"： 顶部对齐。 </marquee>
로그인 후 복사

동작

스크롤 방법 설정:

alternate : 두 끝 사이를 앞뒤로 스크롤하는 것을 나타냅니다.

스크롤: 한쪽 끝에서 다른 쪽 끝으로 스크롤하는 것을 의미하며 반복됩니다.

슬라이드: 반복 없이 한 끝에서 다른 끝까지 스크롤하는 것을 의미합니다.

코드는 다음과 같습니다.

<marquee behavior="alternate">alternate：表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll：表示由一端滚动到另一端，会重复。</marquee>
<marquee behavior="slide">slide：  表示由一端滚动到另一端，不会重复。</marquee>
로그인 후 복사

bgcolor

활성화 배경색을 설정합니다. 자막, 배경색은 RGB, 16진수 값 형식, 색상 이름으로 설정할 수 있습니다.

코드는 다음과 같습니다.

<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>
로그인 후 복사

direction

액티브 스크롤 방향을 설정합니다. 자막

코드는 다음과 같습니다.

<marquee direction="down">设定活动字幕的滚动方向direction="down"：向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left"：向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right"：向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up"：向上</marquee>
로그인 후 복사

높이

활성화 높이를 설정합니다. 자막

코드는 다음과 같습니다:

<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>
로그인 후 복사

width

활성 자막의 너비를 설정합니다. 자막

코드는 다음과 같습니다.

<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
로그인 후 복사

hspace

자막 사이의 거리를 설정합니다. 활성 자막의 위치와 상위 컨테이너의 가로 테두리

표시 상자 주변의 가로 공간을 제어합니다.

코드는 다음과 같습니다.

  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
    </tr>
  </table>
로그인 후 복사

vspace

활성 자막 위치와 상위 컨테이너의 세로 테두리 사이의 거리를 설정합니다

세로 공간을 제어합니다.

코드는 다음과 같습니다.

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>
로그인 후 복사

loop

Sets 스크롤 횟수. loop=-1은 항상 스크롤하는 것을 의미하며, 기본값 -1

의 코드는 다음과 같습니다.

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p> </p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>
로그인 후 복사

스크롤마운트

활성 자막 스크롤 설정 속도, 단위 픽셀

코드는 다음과 같습니다.

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>
로그인 후 복사

scrolldelay

활성 자막 스크롤 설정 두 배 사이의 지연 시간, 단위 밀리초(밀리초)

값이 크면 단계 정지 효과

코드는 다음과 같습니다. 

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>
로그인 후 복사

위는 HTML에서 소개한 marquee 속성에 대한 자세한 설명입니다. 편집자님, 도움이 되셨으면 좋겠습니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 시간 맞춰 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

HTML의 marquee 속성에 대한 더 자세한 글은 PHP 중국어 홈페이지를 참고해주세요!

관련 라벨：
HTML Marquee
원천：php.cn
이전 기사：HTML5를 미리 로드하면 페이지가 빠르게 렌더링됩니다. 다음 기사：HTML 페이지에서 체크박스를 작동하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿