marquee 用法详解

最新推荐文章于 2021-03-10 23:17:35 发布

转载最新推荐文章于 2021-03-10 23:17:35 发布 · 795 阅读

文章标签：

#marquee

IT 专栏收录该内容

2 篇文章

订阅专栏

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