>  기사  >  웹 프론트엔드  >  HTML의 marquee 속성에 대한 심층 분석

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

怪我咯
怪我咯원래의
2017-05-07 11:55:321320검색

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

ed126914ed1419bab26abf7cf307b7b9 태그 내용 정렬 설정

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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