marquee 用法详解

Blex 2011-04-14

展开全文

基本语法
<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.scrollTop -= moved1.offsetHeight; } else { moved.scrollTop++; } } var MyMar=setInterval(Marquee,speed); 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>  <BUTTON onclick="alert('scrolltop: ' + m1.scrollTop + ' scrollLeft: ' + m1.scrollLeft)">读取</BUTTON>  <BUTTON onclick="m1.stop();m1.scrollTop = 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.offsetTop-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">  </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>