marquee用法详解

marquee用法详解
基本语法
<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>
滚动marquee的详细用法解析
[ 2007-02-07 12:44:42 | 作者: Moocrun ]
Font Size: Large | Medium | Small
前阵子要做无间断滚动，找了很久终于找到了阿米的眼泪写的方法，经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" : 默认值——表示在两端之间来回滚动。

看下例子吧:
<marquee behavior="scroll">behavior="scroll"表示由一端滚动到另一端；</marquee> <marquee behavior="slide">behavior="slide":表示由一端快速滑动到另一端，且不再重复；</marquee> <marquee behavior="alternate">behavior="alternate"表示在两端之间来回滚动。

</marquee>
提示：您可以先修改部分代码再运行
direction: left(默认值) 左; right 右;up 上;down 下;
bgcolor: 背景颜色
height: 高度
weight: 宽度
Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。

作用大概和css中的margin差不多
scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。

scrolldelay: 延迟时间
loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）
<marquee scrollamount="15">scrollamount="15" 的时候就很快了</marquee> <marquee scrollamount="5">scrollamount="5" </marquee> <marquee scrollamount="5"
direction="up">scrollamount="5"direction="up" </marquee> <marquee scrollamount="3" direction="right">scrollamount="3"direction="right"
</marquee> <marquee scrollamount="3" direction="left" loop="10">scrollamount="3" direction="left" loop="10" </marquee>
好，现在我们再来接触一些Dcode的一些知识。

首先是两个鼠标事件
onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
onmouseover="this.stop();" onmouseout="this.start
意思就是鼠标移到marquee的内容上的时候停止循环，鼠标移开marquee 又开始移动。

<marquee direction="up" onmouseover="this.stop();" onmouseout="this.start();"> 在水里鱼的眼泪<br> 鱼的眼泪在水里<br> 谁擦去谁的眼泪<br> </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 方法取消先前开始的间隔事件。

好现在我们先看一段简单程序
<div id=moved style=overflow:hidden;height:50;width:150> <div id=moved1> 我是最前的<br> 我向上运动<br> 我向上运动<br> 我向上运动<br> 我向上运动<br> 我向上运动<br> 我是最后的</div> <div id=moved2></div> </div> <script> var speed=30; moved2.innercode=moved1.innercode; function Marquee() { if(moved2.offsetTop-moved.scrollTop<=0){ moved.scrollT op -= moved1.offsetHeight; } else { moved.scrollTop++; } } var MyMar=setInterval(Marquee,speed); moved.onmouseover = function() { clearInterval(MyMar); } moved.onmouseout = function() { MyMar=setInterval(Marquee,speed); } </script>
上面的就是不间断滚动了，翻译下这段代码
<script>
var speed=30; //设变量滚动速度变量speed =30
moved2.innercode=moved1.innercode //复制moved1的code代码给moved2
function Marquee()
{
if(moved2.offsetT op-moved.scrollT op<=0) { //如果moved2.offset-moved.scrolltop<=0(也就是moved1的内容滚动结束)则moved2开始滚动
moved.scrollTop-=moved1.offsetHeight; //moved.scrolltop 此时的值为moved2滚动的长度
}
else {
moved.scrollTop++; //否则moved1继续滚动
}
}
var MyMar=setInterval(Marquee,speed) //每隔30毫秒执行一次
moved.onmouseover = function() {clearInterval(MyMar);} //鼠标移过停止执行
moved.onmouseout = function() {MyMar=setInterval(Marquee,speed);} //滑出继续执行</script>
大家不理解的话再看这个例子
<MARQUEE id=m1 direction=up style="border-width:2px;border-style:solid;" width=200 height=200>向上</MARQUEE><BR> <!-- 单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollT op 属性的值。

--> <BUTTON onclick="alert('scrolltop: ' + m1.scrollT op + ' scrollLeft: ' + m1.scrollLeft)">读取</BUTTON>
<!-- 当字幕停止时，你可以设置水平字幕的 scrollLeft，或者设置垂直字幕的scrollTop。

--> <BUTTON onclick="m1.stop();m1.scrollT op = 100;">停止并设置scrollTop=30</BUTTON> <BUTTON onclick="m1.start();">开始</BUTTON>
好的，接下来，同理可得
<div id=moved style=overflow:hidden;height:30;width:150> <div id=moved1> 我是打头的<br> 我向上运动</div> <div id=moved2></div> </div> <script> var speed=30; moved2.innerHTML=moved1.innerHTML function Marquee() { if(moved2.offsetT op-moved.scrollTop<=0) moved.scrollTop -= moved1.offsetHeight; else moved.scrollTop++; } var MyMar=setInterval(Marquee,speed)
moved.onmouseover=function() {clearInterval(MyMar)} moved.onmouseout=function()
{MyMar=setInterval(Marquee,speed)} </script>
再同理
<div style="width:200px;height:150px;overflow:hidden" onmouseover="try{clearTimeout(timer1)}catch(e){;}" onmouseout="timer1=setInterval('newsScroll()',10)"> <table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style="position:relative;top:0px;width:200px;" id=news> <tbody>
<tr> <td valign=top height=150> <b>新闻一</b><br> 我是打头的<br> 我向上运动<br> 我向上运动<br> 我向上运动 </td> </tr> <tr> <td valign=top height=150> <b>新闻二</b><br> 我是打头的<br> 我向上运动<br> 我向上运动<br> 我向上运动<br> </td> </tr> <tr> <td valign=top height=150> <b>新闻三</b><br> 我是打头的<br> 我向上运动<br> 我向上运动<br> </td> </tr> </tbody> <script language=javascript> //重复一次新闻内容document.write(news.tBodies[0].innercode) </script> </table> </div> <script language=javascript> //实现不间断滚动function newsScroll() { news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2); } timer1=setInterval('newsScroll()',10) //更改第二个参数可以改变速度，值越小，速度越快。

</script>
经过功能完善
<html> <head> <style type="text/css"> <!-- .test { font-size: 12px; line-height: normal; text-decoration: none; } --> </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").scrollT op >= document.getElementById("layer2").offsetHeight){ document.ge tElementById("layer1").scrollT op -= (document.getElementById("layer2").offsetHeight - iFrame); } else { document.getElementById("layer1").scrollT op += iFrame; } } timer = setInterval("move()",iFrequency); document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);} </script> </body> </html>。