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

HTML의 marquee 속성에 대한 심층 분석

怪我咯
풀어 주다： 2017-05-07 11:55:32
원래의
1330명이 탐색했습니다.

이 글은 주로 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

번호를 설정합니다. 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.cn
이전 기사：젖빛 유리 효과를 얻기 위한 간단한 예제 코드 다음 기사：HTML에서 스크롤 텍스트를 만드는 예제 코드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
2024
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2188
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1843
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1734
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1757
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿