查看完整版本: marquee用法的详细解释

cnnas 2007-11-4 00:32

marquee用法的详细解释

[font=Times New Roman] [/font]
[font=宋体][size=9pt]前阵子要做无间断滚动,找了很久终于找到了阿米的眼泪写的方法,经[/size][/font][font=Verdana][size=9pt]raidl[/size][/font][font=宋体][size=9pt]完善后非常好用,不敢藏私,拿出来和大家分享一下。当时是另存的,忘了原来的网址是什么了。[/size][/font]
[font=宋体][size=9pt]下面介绍[/size][/font][font=Verdana][size=9pt]marquee [/size][/font][font=宋体][size=9pt]的终极用法。[/size][/font]
[font=宋体][size=9pt]先看下[/size][/font][font=Verdana][size=9pt] marquee [/size][/font][font=宋体][size=9pt]的[/size][/font][font=Verdana][size=9pt]html [/size][/font][font=宋体][size=9pt]属性[/size][/font][font=Verdana][size=9pt]
<MARQUEE ALIGN="…"     
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]behavior="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]BGCOLOR="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]DIRECTION="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]HEIGHT="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]WIDTH="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]HSPACE="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]VSPACE="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]LOOP="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]SCROLLAMOUNT="…"  
[/size][/font][font=宋体][size=9pt]  [/size][/font][font=Verdana][size=9pt]SCROLLDELAY="…"  
>…</MARQUEE>  

align:    [/size][/font][font=宋体][size=9pt]对齐方式[/size][/font][font=Verdana][size=9pt] LEFT[/size][/font][font=宋体][size=9pt],[/size][/font][font=Verdana][size=9pt]CENTER[/size][/font][font=宋体][size=9pt],[/size][/font][font=Verdana][size=9pt]RIGHT[/size][/font][font=宋体][size=9pt],[/size][/font][font=Verdana][size=9pt]TOP[/size][/font][font=宋体][size=9pt],[/size][/font][font=Verdana][size=9pt]BOTTOM ([/size][/font][font=宋体][size=9pt]不用多说了[/size][/font][font=Verdana][size=9pt])
behavior:    [/size][/font][font=宋体][size=9pt]用于设定滚动的方式,主要由三种方式:[/size][/font][font=Verdana][size=9pt]
behavior="scroll":    [/size][/font][font=宋体][size=9pt]表示由一端滚动到另一端;[/size][/font][font=Verdana][size=9pt]
behavior="slide":    [/size][/font][font=宋体][size=9pt]表示由一端快速滑动到另一端,且不再重复;[/size][/font][font=Verdana][size=9pt]
behavior="alternate" :    [/size][/font][font=宋体][size=9pt]默认值[/size][/font][font=Verdana][size=9pt]——[/size][/font][font=宋体][size=9pt]表示在两端之间来回滚动。[/size][/font][font=Verdana][size=9pt][/size][/font]
[font=Verdana][size=9pt]direction:    left([/size][/font][font=宋体][size=9pt]默认值[/size][/font][font=Verdana][size=9pt]) [/size][/font][font=宋体][size=9pt]左[/size][/font][font=Verdana][size=9pt]; right [/size][/font][font=宋体][size=9pt]右[/size][/font][font=Verdana][size=9pt];up [/size][/font][font=宋体][size=9pt]上[/size][/font][font=Verdana][size=9pt];down [/size][/font][font=宋体][size=9pt]下[/size][/font][font=Verdana][size=9pt];
bgcolor:    [/size][/font][font=宋体][size=9pt]背景颜色[/size][/font][font=Verdana][size=9pt]
height:    [/size][/font][font=宋体][size=9pt]高度[/size][/font][font=Verdana][size=9pt]
weight:    [/size][/font][font=宋体][size=9pt]宽度[/size][/font][font=Verdana][size=9pt]
Hspace/vspace:    [/size][/font][font=宋体][size=9pt]分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和[/size][/font][font=Verdana][size=9pt]css[/size][/font][font=宋体][size=9pt]中的[/size][/font][font=Verdana][size=9pt]margin[/size][/font][font=宋体][size=9pt]差不多[/size][/font][font=Verdana][size=9pt]
scrollamount:    [/size][/font][font=宋体][size=9pt]用于设定每个连续滚动文本后面的间隔,该间隔用像素表示,以上是官方说法[/size][/font][font=Verdana][size=9pt],[/size][/font][font=宋体][size=9pt]其实就是滚动的速度,值不能太大[/size][/font][font=Verdana][size=9pt],[/size][/font][font=宋体][size=9pt]要不从视觉角度来说[/size][/font][font=Verdana][size=9pt],[/size][/font][font=宋体][size=9pt]是没反应的[/size][/font][font=Verdana][size=9pt].[/size][/font][font=宋体][size=9pt]值越大速度越快,反之越慢。[/size][/font][font=Verdana][size=9pt]
scrolldelay:    [/size][/font][font=宋体][size=9pt]延迟时间[/size][/font][font=Verdana][size=9pt]
loop:    [/size][/font][font=宋体][size=9pt]这个属性大家也很熟悉,循环次数;[/size][/font][font=Verdana][size=9pt]loop=-1[/size][/font][font=宋体][size=9pt]的时候一直重复循环(默认值)[/size][/font][font=Verdana][size=9pt][/size][/font]
[font=Verdana][size=9pt] [/size][/font]
[font=宋体][size=9pt]好,现在我们再来接触一些[/size][/font][font=Verdana][size=9pt]Dcode[/size][/font][font=宋体][size=9pt]的一些知识。[/size][/font]
[font=宋体][size=9pt]首先是两个鼠标事件[/size][/font][font=Verdana][size=9pt]

onmouseover:    [/size][/font][font=宋体][size=9pt]鼠标触发事件[/size][/font][font=Verdana][size=9pt]---[/size][/font][font=宋体][size=9pt]当用户将鼠标指针移动到对象内时触发[/size][/font][font=Verdana][size=9pt]
onmouseout:    [/size][/font][font=宋体][size=9pt]鼠标滑出事件[/size][/font][font=Verdana][size=9pt]---[/size][/font][font=宋体][size=9pt]当用户将鼠标指针移出对象边界时触发[/size][/font]
[font=宋体][size=9pt]这里要用到的是[/size][/font][font=Verdana][size=9pt] this.start() [/size][/font][font=宋体][size=9pt]与[/size][/font][font=Verdana][size=9pt]this.stop()
FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">意思就是鼠标移到[/size][/font][font=Verdana][size=9pt]marquee[/size][/font][font=宋体][size=9pt]的内容上的时候停止循环,鼠标移开[/size][/font][font=Verdana][size=9pt]marquee [/size][/font][font=宋体][size=9pt]又开始移动。[/size][/font][font=Verdana][size=9pt][/size][/font]
[font=宋体][size=9pt]继续[/size][/font][font=Verdana][size=9pt]
innercode:    [/size][/font][font=宋体][size=9pt]设置或获取位于对象起始和结束标签内的[/size][/font][font=Verdana][size=9pt] code
innerText:    [/size][/font][font=宋体][size=9pt]设置或获取位于对象起始和结束标签内的文本[/size][/font][font=Verdana][size=9pt]
scrollLeft:    [/size][/font][font=宋体][size=9pt]设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离[/size][/font][font=Verdana][size=9pt]
scrollTop:    [/size][/font][font=宋体][size=9pt]设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。[/size][/font][font=Verdana][size=9pt]PS:[/size][/font][font=宋体][size=9pt]大家不要想当然的以为有[/size][/font][font=Verdana][size=9pt]scrollRigh[/size][/font][font=宋体][size=9pt]和[/size][/font][font=Verdana][size=9pt]scrollDown [/size][/font][font=宋体][size=9pt]:)[/size][/font][font=Verdana][size=9pt]
scrollDelay:    [/size][/font][font=宋体][size=9pt]设置或获取字幕滚动的速度,要创建垂直滚动的字幕,请将其[/size][/font][font=Verdana][size=9pt] scrollLeft [/size][/font][font=宋体][size=9pt]属性设定为[/size][/font][font=Verdana][size=9pt]0[/size][/font][font=宋体][size=9pt],要创建水平滚动的字幕,请将其[/size][/font][font=Verdana][size=9pt] scrollTop [/size][/font][font=宋体][size=9pt]属性设定为[/size][/font][font=Verdana][size=9pt] 0[/size][/font][font=宋体][size=9pt],这将覆盖任何脚本设置[/size][/font][font=Verdana][size=9pt]
scrollHeight:    [/size][/font][font=宋体][size=9pt]获取对象的滚动高度[/size][/font][font=Verdana][size=9pt]
scrollAmount:    [/size][/font][font=宋体][size=9pt]设置或获取介于每个字幕绘制序列之间的文本滚动像素数[/size][/font][font=Verdana][size=9pt]
offsetTop:    [/size][/font][font=宋体][size=9pt]获取对象相对于版面或由[/size][/font][font=Verdana][size=9pt] offsetTop [/size][/font][font=宋体][size=9pt]属性指定的父坐标的计算顶端位置[/size][/font][font=Verdana][size=9pt]
offsetLeft:    [/size][/font][font=宋体][size=9pt]获取对象相对于版面或由[/size][/font][font=Verdana][size=9pt] offsetParent [/size][/font][font=宋体][size=9pt]属性指定的父坐标的计算左侧位置[/size][/font][font=Verdana][size=9pt]
offsetHeight:    [/size][/font][font=宋体][size=9pt]获取对象相对于版面或由父坐标[/size][/font][font=Verdana][size=9pt] offsetParent [/size][/font][font=宋体][size=9pt]属性指定的父坐标的高度。[/size][/font][font=Verdana][size=9pt]
setInterval:    [/size][/font][font=宋体][size=9pt]交互时间。它从载入后[/size][/font][font=Verdana][size=9pt],[/size][/font][font=宋体][size=9pt]每隔指定的时间就执行一次表达式[/size][/font][font=Verdana][size=9pt]
clearInterval:    [/size][/font][font=宋体][size=9pt]使用[/size][/font][font=Verdana][size=9pt] setInterval [/size][/font][font=宋体][size=9pt]方法取消先前开始的间隔事件。[/size][/font]
[font=Times New Roman]<html>[/font]
[font=Times New Roman]<head>[/font]
[font=Times New Roman]<style type="text/css">[/font]
[font=Times New Roman]<!--[/font]
[font=Times New Roman].test {[/font]
[font=Times New Roman]
font-size: 12px;[/font]
[font=Times New Roman]
line-height: normal;[/font]
[font=Times New Roman]
text-decoration: none;[/font]
[font=Times New Roman]}[/font]
[font=Times New Roman]-->[/font]
[font=Times New Roman]</style>[/font]
[font=Times New Roman]<head>[/font]
[font=Times New Roman]<body>[/font]
[font=Times New Roman] [/font]
[font=Times New Roman]<div id="layer1" style="overflow-y:hidden;width:50;">[/font]
[font=Times New Roman]<div id="layer2">[/font]
[font=Times New Roman]
<table width="130" height="70" border="0" align="center" cellpadding="0" cellspacing="0" class="test">[/font]
[font=Times New Roman]
<tr>[/font]
[font=Times New Roman]
<td width="150" height="70" valign="top" bgcolor="#FFFFFF" class="nav1style style46">[/font]
[font=Times New Roman]
<center>[/font][font=宋体]第[/font][font=Times New Roman](1)[/font][font=宋体]条[/font][font=Times New Roman]</center>[/font]
[font=Times New Roman]
<a href="#" title="[/font][font=宋体]关于<<电气工程自动化>>研究生班授课的通知[/font][font=Times New Roman]" class="none_underline"><font color=#ff0000>[/font][font=宋体]关于<<电气工程自动化>>研究生班授课的通知[/font][font=Times New Roman] 2006-3-9</font></a><br><br>[/font]
[font=Times New Roman] [/font]
[font=Times New Roman]
<center>[/font][font=宋体]第[/font][font=Times New Roman](2)[/font][font=宋体]条[/font][font=Times New Roman]</center>[/font]
[font=Times New Roman]
<a href="#" title="[/font][font=宋体]关于企业管理研究生班授课的通知[/font][font=Times New Roman]" class="none_underline"><font color=#ff0000>[/font][font=宋体]关于企业管理研究生班授课的通知[/font][font=Times New Roman] 2006-3-8</font></a><br><br>[/font]
[font=Times New Roman]
</td>[/font]
[font=Times New Roman]
</tr>[/font]
[font=Times New Roman]
</table>[/font]
[font=Times New Roman]</div>[/font]
[font=Times New Roman]<div id="layer3"></div>[/font]
[font=Times New Roman] [/font]
[font=Times New Roman]<script language="javascript">[/font]
[font=Times New Roman]
var layerHeight = 100; // [/font][font=宋体]定义滚动区域的高度[/font][font=Times New Roman].[/font]
[font=Times New Roman]
var iFrame = 1; // [/font][font=宋体]定义每帧移动的象素[/font][font=Times New Roman].[/font]
[font=Times New Roman]
var iFrequency = 50; // [/font][font=宋体]定义帧频率[/font][font=Times New Roman].[/font]
[font=Times New Roman]
var timer; // [/font][font=宋体]定义时间句柄[/font][font=Times New Roman].[/font]
[font=Times New Roman]
if(document.getElementById("layer2").offsetHeight >= layerHeight)[/font]
[font=Times New Roman]
document.getElementById("layer1").style.height = layerHeight;[/font]
[font=Times New Roman]
else[/font]
[font=Times New Roman]
document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;[/font]
[font=Times New Roman]
document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;[/font]
[font=Times New Roman]    [/font]
[font=Times New Roman]
function move(){[/font]
[font=Times New Roman]
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){[/font]
[font=Times New Roman]
document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);[/font]
[font=Times New Roman]
}[/font]
[font=Times New Roman]
else {[/font]
[font=Times New Roman]
document.getElementById("layer1").scrollTop += iFrame;[/font]
[font=Times New Roman]
}[/font]
[font=Times New Roman]
}[/font]
[font=Times New Roman]  [/font]
[font=Times New Roman]
timer = setInterval("move()",iFrequency);[/font]
[font=Times New Roman]
document.getElementById("layer1").onmouseover=function() {clearInterval(timer);}[/font]
[font=Times New Roman]
document.getElementById("layer1").onmouseout=function() {timer=setInterval("move()",iFrequency);}[/font]
[font=Times New Roman]</script>[/font]
[font=Times New Roman] [/font]
[font=Times New Roman]</body>[/font]
[font=Times New Roman]</html>[/font]
页: [1]
查看完整版本: marquee用法的详细解释