웹 프론트엔드 HTML 튜토리얼 marquee 요소는 스크롤 글꼴, 그림 슬라이딩 및 기타 효과를 구현합니다_HTML/Xhtml_웹 페이지 제작

marquee 요소는 스크롤 글꼴, 그림 슬라이딩 및 기타 효과를 구현합니다_HTML/Xhtml_웹 페이지 제작

May 16, 2016 pm 04:38 PM
marquee 슬라이드

marquee元素可以实现简单的字体(图文等) 的滑动等效果:

复主代码
代码아래:

<style type="text/css">
#div01{
너비: 500px;
}
</style>
<script type="text/javascript">
</script>
<marquee Behavior="alertnate"><font size=30 color='red'>www.baidu.com111</font></marquee>
<marquee 방향=right bgcolor='#ff2233' 행동="alertnate"><font size=30 color='blue'>www.baidu.com222</font></marquee>
<marquee id="m3" 방향=아래 bgcolor='#dbdbdb' 높이=50px hspace=20px vspace=20px 행동="경고" scrollLeft=왼쪽 onmouseover="this.stop()" onmouseout="this .start()"><font size=30 color='blue'>www.baidu333.com</font></marquee>
<marquee id="m4" 방향=up bgcolor='#00dbdb'behavior="alertnate"><font size=30 color='blue'>www.baidu444.com</font>&lt ;/천막>



<div id="div01"><marquee 방향=right bgcolor='#ff2233'behavior="alertnate" scrolldelay=100><글꼴 크기=30 색상 ='blue'>www.baidu.com555</font></marquee></div>
<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

방향 表示滚动的方向,值可以是left,right,up,down,默认为left
행동 表示滚动的方式,值可以是scroll(连续滚动)슬라이드(滑动一次) )대체(来回滚动)
loop 表示循环的次数,值是正整数,默认为无限循环
scrollmount 表示运动速titude,值是正整数,默认为6
scrolldelay 表示停顿时间,值是正整数,默认为0,单位似乎是毫秒
align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
bgcolor 表示运动区域적 背景색, 值是16进적 RGB색상
hspace、vspace 表示元素到区域边界的平距离와垂直距离,值是正整数,单位是image素。
onmouseover=this.stop() onmouseout=this.start()滚动停止,当鼠标移开的时候又继续滚动。

以下是设置点击按钮时m3、m4的滚动或停止:


复代码 代码如下:
<input type="button" onclick="m3.stop();" value="m3.stop"></input>
<input type="button" onclick="m3.start();" value="m3.start"></input>
<button onclick="m4.stop();">m4.stop</button>
<button onclick="m4.start();">m4.start</button>

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

휴대폰 화면이 미끄러지거나 건조해지면 어떻게 해야 하나요? 휴대폰 화면이 미끄러지거나 건조해지면 어떻게 해야 하나요? Dec 04, 2023 pm 03:51 PM

휴대폰 화면이 미끄러지거나 건조해지면 어떻게 해야 하나요?

JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까? JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까? Oct 20, 2023 am 11:19 AM

JavaScript를 사용하여 이미지의 위아래 슬라이딩 전환 효과를 얻고 페이드인 및 페이드아웃 애니메이션을 추가하는 방법은 무엇입니까?

HTML, CSS 및 jQuery: 슬라이딩 패널 효과 구현에 대한 기술 가이드 HTML, CSS 및 jQuery: 슬라이딩 패널 효과 구현에 대한 기술 가이드 Oct 27, 2023 pm 04:39 PM

HTML, CSS 및 jQuery: 슬라이딩 패널 효과 구현에 대한 기술 가이드

jQuery 슬라이딩 이벤트 해석: 구현 원칙 및 주의사항 jQuery 슬라이딩 이벤트 해석: 구현 원칙 및 주의사항 Feb 27, 2024 am 10:57 AM

jQuery 슬라이딩 이벤트 해석: 구현 원칙 및 주의사항

선택 윤곽 매개변수는 무엇입니까? 선택 윤곽 매개변수는 무엇입니까? Oct 18, 2023 am 10:10 AM

선택 윤곽 매개변수는 무엇입니까?

반응으로 슬라이딩을 구현하는 방법 반응으로 슬라이딩을 구현하는 방법 Dec 30, 2022 am 11:09 AM

반응으로 슬라이딩을 구현하는 방법

watchOS 10.2: 스와이프로 시계 모드를 변경하는 방법 watchOS 10.2: 스와이프로 시계 모드를 변경하는 방법 Dec 15, 2023 pm 11:15 PM

watchOS 10.2: 스와이프로 시계 모드를 변경하는 방법

CSS Flex 탄력적 레이아웃을 사용하여 슬라이딩 카드 레이아웃을 구현하는 방법 CSS Flex 탄력적 레이아웃을 사용하여 슬라이딩 카드 레이아웃을 구현하는 방법 Sep 28, 2023 pm 01:16 PM

CSS Flex 탄력적 레이아웃을 사용하여 슬라이딩 카드 레이아웃을 구현하는 방법

See all articles