天天看點

marquee 用法詳解

前陣子要做無間斷滾動,找了很久終于找到了阿米的眼淚寫的方法,經 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">

<!--

.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" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title=" 關于<<電氣工程自動化>>研究所學生班授課的通知 " class="none_underline"><font color=#ff0000> 關于<<電氣工程自動化>>研究所學生班授課的通知  2006-3-9</font></a><br><br>

<center> 第 (2) 條 </center>

<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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").οnmοuseοver=function() {clearInterval(timer);}

document.getElementById("layer1").οnmοuseοut=function() {timer=setInterval("move()",iFrequency);}

</script>

</body>

</html>

繼續閱讀