原创 marquee用法的详细解释

 2009-9-8 09:27  3265 9 9 分类: 工程师职场

让你的文字动起来——Marquee用法详解

发表日期：2005年8月12日已经有13308位读者读过此文

在论坛默认的编辑状态下，我们可以通过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>

=========================================================================

前阵子要做无间断滚动，找了很久终于找到了阿米的眼泪写的方法，经raidl完善后非常好用，不敢藏私，拿出来和大家分享一下。当时是另存的，忘了原来的网址是什么了。
下面介绍marquee 的终极用法。
先看下 marquee 的html 属性
<MARQUEE ALIGN="…"
　　behavior="…"
　　BGCOLOR="…"
　　DIRECTION="…"
　　HEIGHT="…"
　　WIDTH="…"
　　HSPACE="…"
　　VSPACE="…"
　　LOOP="…"
　　SCROLLAMOUNT="…"
　　SCROLLDELAY="…"
>…</MARQUEE>

align: 对齐方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说了)
behavior: 用于设定滚动的方式，主要由三种方式：
behavior="scroll": 表示由一端滚动到另一端；
behavior="slide": 表示由一端快速滑动到另一端，且不再重复；
behavior="alternate" : 默认值——表示在两端之间来回滚动。
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多
scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。
scrolldelay: 延迟时间
loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）

好，现在我们再来接触一些Dcode的一些知识。
首先是两个鼠标事件

onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">意思就是鼠标移到marquee的内容上的时候停止循环，鼠标移开marquee 又开始移动。
继续
innercode: 设置或获取位于对象起始和结束标签内的 code
innerText: 设置或获取位于对象起始和结束标签内的文本
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。PS:大家不要想当然的以为有scrollRigh和scrollDown ：）
scrollDelay: 设置或获取字幕滚动的速度，要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为0，要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
scrollHeight: 获取对象的滚动高度
scrollAmount: 设置或获取介于每个字幕绘制序列之间的文本滚动像素数
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
setInterval: 交互时间。它从载入后,每隔指定的时间就执行一次表达式
clearInterval: 使用 setInterval 方法取消先前开始的间隔事件。
<html>
<head>
<style type="text/css">

</style>
<head>
<body>

<div id="layer1" style="overflow-y:hidden;width:50;">
<div id="layer2">

<table width="130" height="70" border="0" align="center" cellpadding="0" cellspacing="0" class="test">

<tr>

<td width="150" height="70" valign="top" bgcolor="#FFFFFF" class="nav1style style46">

<center>第(1)条</center>

<a href="#" title="关于＜＜电气工程自动化＞＞研究生班授课的通知" class="none_underline"><font color="#ff0000">关于＜＜电气工程自动化＞＞研究生班授课的通知 2006-3-9</font></a><br><br>

<center>第(2)条</center>

<a href="#" title="关于企业管理研究生班授课的通知" class="none_underline"><font color="#ff0000">关于企业管理研究生班授课的通知 2006-3-8</font></a><br><br>

</td>

</tr>

</table>
</div>
<div id="layer3"></div>

<script language="javascript">

var layerHeight = 100; // 定义滚动区域的高度.

var iFrame = 1; // 定义每帧移动的象素.

var iFrequency = 50; // 定义帧频率.

var timer; // 定义时间句柄.

if(document.getElementById("layer2").offsetHeight >= layerHeight)

document.getElementById("layer1").style.height = layerHeight;

else

document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;

document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;

function move(){

if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){

document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);

}

else {

document.getElementById("layer1").scrollTop += iFrame;

}

}


timer = setInterval("move()",iFrequency);

document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}

document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}
</script>

</body>
</html>

超级用户 (2009-1-14 09:50:07)

基本语法
<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction="left">从右向左移！</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior="scroll">一圈一圈绕着走！</marquee>
<marquee behavior="slide">只走一次就歇了！</marquee>
<marquee behavior="alternate">来回走</marquee>

循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop="3" width="50"% behavior="scroll">只走 3 趟</marquee> <P>
<marquee loop="3" width="50"% behavior="slide">只走 3 趟</marquee>
<marquee loop="3" width="50"% behavior="alternate">只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount="20">啦啦啦，我走得好快哟！</marquee>

延时
<scrolldelay=#> <marquee scrolldelay="500" scrollamount="100">啦啦啦，我走一步，停一停！</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#> #=top, middle, bottom <font size="6">
<marquee align="#" width="400">啦啦啦，我会移动耶！</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor="aaaaee">颜色！</marquee>

面积
<height=# width="#"> <marquee height="40" width="50"% bgcolor="aaeeaa">面积！</marquee>

空白
(Margins)<hspace=# vspace="#">
<marquee hspace="20" vspace="20" width="150" bgcolor="ffaaaa" align="middle">面积！</marquee>

写原创有奖励！2024面包板原创奖励正在进行中