无间断滚动marquee的详细用法解析

moyixiu 楼主

原文地址

      前阵子要做无间断滚动，找了很久终于找到了阿米的眼泪写的方法，经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>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

上面的就是不间断滚动了，翻译下这段代码

1. <script>
   
2. var speed=30;   //设变量 滚动速度变量speed =30                  
   
3. moved2.innercode=moved1.innercode //复制moved1的code代码给moved2
   
4. 
   
5. function Marquee()
   
6. {
   
7.         if(moved2.offsetTop-moved.scrollTop<=0) {  //如果moved2.offset-moved.scrolltop<=0(也就是moved1的内容滚动结束)则moved2开始滚动
   
8.           moved.scrollTop-=moved1.offsetHeight;   //moved.scrolltop此时的值为moved2滚动的长度
   
9.      }
   
10.      else {
    
11.                moved.scrollTop++;    //否则moved1继续滚动
    
12.      }
    
13. }
    
14. var MyMar=setInterval(Marquee,speed)    //每隔30毫秒 执行一次
    
15. moved.onmouseover = function() {clearInterval(MyMar);}     //鼠标移过 停止执行
    
16. moved.onmouseout = function() {MyMar=setInterval(Marquee,speed);}    //滑出 继续执行
    
17. </script>

复制代码

大家不理解的话再看这个例子

<MARQUEE id=m1 direction=up style="border-width:2px;border-style:solid;" width=200 height=200>向上</MARQUEE><BR> <!-- 单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollTop 属性的值。 --> <BUTTON onclick="alert('scrolltop: ' + m1.scrollTop + ' scrollLeft: ' + m1.scrollLeft)">读取</BUTTON> <!-- 当字幕停止时，你可以设置水平字幕的 scrollLeft，或者设置垂直字幕的 scrollTop。 --> <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;table-layout:fixed" 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").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>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

hero4u

很久以前的特效书特效精灵很多这样的了。真是怀念那个时候的学习劲头啊。
言归正传，文章虽好，发得不是时候呀。Web Standards 很少用到滚动了，在边缘摩擦，还不如深入敌人内部了。
个人愚见

raycube

marquee 违规的，涉及到行为还是用 js 来实现！

lxu220

marquee 不合标准啊...少用..

yougucaofan

顶，偻上说的对，以后作制作就要想到各个浏览器，不过楼主还是很厉害的，你说的东西我都不会

moyixiu 楼主

嗯，大家说得对，我发现很多人问这方面的问题，就索性把blog收藏的东西发了过来，我赞成从标准学起