Marquee标签(跑马灯)

转载自http://blog.csdn.net/lanvia/article/details/1633755

在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果:向左、向右、向上、向下。再嵌套使用marquee语句,效果就更加丰富了。

marquee的基本语法:<marquee> ... </marquee>

说明:与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间。请看如下例子:

<marquee> 啦啦啦,真的会动耶!</marquee>

啦啦啦,真的会动耶!

瞧,简单吧?不过,以上例子只是使用了marquee的默认用法。我们加入相应的参数,它的移动方法就有所不同了。

参数一:direction。direction的英文意思就是方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。

例:<marquee direction=up>向上移动</marquee>

向上移动

参数二:behavior。移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

例:<marquee direction=left behavior=alternate>哈哈,我来回走!</marquee>

哈哈,我来回走!

<marquee direction=left behavior=slide>累!我只走一次!</marquee>

累!我只走一次!

参数三:loop。循环。若未指定则循环不止(infinite),其值取数值。例:

<marquee loop=3>我只走三次哦</marquee>

我只走三次哦

参数四:scrollamount。移动速度。值取正整数。数值越大,速度越快。例:

<marquee scrollamount=25>看,我走多快!</marquee>

看,我走多快!

参数五:scrolldelay

延时。数值。例:

<marquee scrolldelay=1000>我走一走,停一停</marquee>

我走一走,停一停

参数六:bgcolor

底色。例:

<marquee bgcolor=pink>看到了吧?有底色!</marquee>

看到了吧?有底色!

参数七:width和height。就是移动的宽度与高度了。例:

<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动!</marquee>

这个面积不够我移动!

其他参数:空白(Margins)<hspace=数值 vspace=数值>;对齐方式(Align) <align=top/ middle/bottom>

我们在本节所举的例了当中,marquee所移动的对象都是文字,其实呢,凡可视对象,只要有足够的区域,marquee都能令它们移动。

Note.该标签不是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
设定<marquee>标签内容的对齐方式
absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
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>

behavior
设定滚动的方式:
alternate: 表示在两端之间来回滚动。 
scroll: 表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复。

代码如下:

<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>

height
设定活动字幕的高度

代码如下:
<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>

width
设定活动字幕的宽度

代码如下:
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>

hspace
设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.

代码如下:

<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
设定活动字幕里所在的位置距离父容器垂直边框的距离
This controls the vertical(垂直) space around the display box.

代码如下:
<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

loop
设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

代码如下:

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

scrollamount
设定活动字幕的滚动速度,单位pixels

代码如下:

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

scrolldelay
设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果

代码如下:

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>

时间: 2024-10-05 06:13:07

Marquee标签(跑马灯)的相关文章

marquee实现跑马灯

<!DOCTYPE html><html> <head><title>跑马灯大全</title> </head> <body> <marquee onmouseout="this.start()" onmouseover="this.stop()" id="aaaa"> <div> <img src="images/haie

HTML连载10-details标签&amp;summary标签&amp;marquee标签

?1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: <details> <summary>概要信息</summary> 详细信息 </details> 我们可以看到有一个倒三角形点击这个三角形,便可以将详细信息折叠或者展开.在HTML中,例如:淘宝网的一个实例,我们把鼠标放到汉字选项的时候,可以看到右边展开了一些

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;

Android:TextView 自动滚动(跑马灯) (转)

Android:TextView 自动滚动(跑马灯) TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" 2.设置可滚到,或显示样式:android:ellipsize="marquee" 3.TextView只有在获取焦点后才会滚动显示隐藏文字,因此需要在包中新建一个类,继承TextView.重写isFocused方法,这个方法默认行为是,如果TextView获得焦点,方法返回true,失

浅谈TextView Ellipsize效果与跑马灯

说到TextView 效果,相信大家一定熟悉跑马灯. 先来看看 Ellipsize是什么,Ellipsize 从开发技术上翻译为省略效果.故名思议,就是当文本无法显示全部时,用什么效果来显示未显示的部分. 一,What is Ellipsize  and  How to use ? 首先我们在Android XML中需要这样定义 <TextView android:id="@+id/textView" android:layout_width="wrap_content

Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]

有时候在xml中写的跑马灯效果不滚动:原因有以下 Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize=”marquee” 2.TextView必须单行显示,即内容必须超出TextView大小 3.TextView要获得焦点才能滚动(如果还不行,就要用自定义的TextView控件中重写isFocused()返回true就行[方法代码在下面的AlwaysMarqueeTextView 类],但是遇到新问题就是界面有多个这样的控件显示时当

Textview在Listview中实现跑马灯效果

textview添加属性: android:singleLine="true" 表示单行显示 android:ellipsize="marquee" 设置当文字过长时,该控件该如何显示.有如下值设置:”start”—–省略号显示在开头:”end”——省略号显示在结尾:”middle”—-省略号显示在中间:”marquee” ——以跑马灯的方式显示(动画横向移动) android:marqueeRepeatLimit="marquee_forever&quo

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

TextView标签的属性和跑马灯效果

text:显示的内容 textSize:文本的大小 textColor:文本的颜色 visibility:可见性  默认可见,invisible:表示不可见,但对控件的显示区域做了保留 gone:隐藏控件当前控件显示的区域不做保留 autoLink:表示当前TextView的链接类型,值为“phone,web,email.....” TextView跑马灯效果 android:singleLine="true"  单行显示 android:ellipsize="marquee