marquee实现文字滚动

最新推荐文章于 2021-03-01 14:25:56 发布

转载最新推荐文章于 2021-03-01 14:25:56 发布 · 713 阅读

文章标签：

#behavior #layer #scroll #timer #iframe #function

本文深入解析了marquee标签的详细用法，包括移动属性、方向、方式、循环、速度、延时等核心参数，并通过实例代码展示了如何应用marquee标签实现动态滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

marquee用法的详细解释

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

基本语法
<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>