1. 程式人生 > >HTML滾動文字程式碼 marquee標籤

HTML滾動文字程式碼 marquee標籤

看到一個HTML滾動文字程式碼 marquee標籤的內容,非常全面,而且覺得有點意思,可以讓大家為自己部落格或者網站設定一個漂亮的滾動文字。

以下是原文:

 

 

  1. <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
  2. <div align="left" ><br />
  3. </div >
  4. <center ><font face="黑體" color="#008000" size="4" ></font ></center >
  5. <div align="left" ><br />
  6. </div >
  7. <center >
  8. <p ><font color="#ff6600" size="4" >滾動文字</font ></p >
  9. <p ><font color="#ff4500" size="4" >滾動文字</font ></p >
  10. <p ><font color="#ff3300" size="4" >滾動文字</font ><br />
  11. <br />
  12. </p >
  13. </marquee >

 

 

marquee 引數:

BGColor:滾動文字框的背景顏色。

Direction:滾動方向設定,可選擇Left(從右到左)、Rightup(從下到上)和down(從上到下)

scrolldelay:每輪滾動之間的延遲時間,數字越大滾動越慢。

scrollamount:一次滾動總的時間量,數字越小滾動越慢。

Behaviour:滾動的方式設定,三種取值:Scroll(迴圈滾動) lide(滑入,單次滾動)、Alternate(來回滾動)。

Align:文字的對齊方式設定,可選擇Middle(居中)、Bottom(居下)還是Top(居上)。

Width:滾動文字框的寬度,輸入一個數值後從後面的單選框選擇in Pixels(按畫素)或是in Percent(按百分比)。

Height:滾動文字框的高度,輸入一個數值後從後面的單選框選擇in Pixels(按畫素)或是in Percent(按百分比)。

loop:滾動次數,預設為infinite(無限)

hspace、vspace:前後、上下的空行。

 

 

1.建立第一個滾動字幕

程式碼如:

  1. <marquee scrollAmount=2 width=300>歡迎來到易捷部落格網! www.vxia.net </marquee>

效果如:

 

歡迎來到易捷部落格網! www.vxia.net

       

2.各引數詳解

 

a)scrollAmount。表示速度,值越大速度越快。取整數,預設為6,建議設為1~3比較好。

b)width和height,表示滾動區域的大小,width是寬度,height是高度。特別是在做垂直滾動的時候,一定要設height的值。

c)direction。表示滾動的方向,預設為從右向左:←←←。可選的值有right、down、up。滾動方向分別為:right表示→→→,up表示↑,down表示↓。

d)scrollDelay,這也是用來控制速度的,取整數,預設為90,值越大,速度越慢。通常scrollDelay是不需要設定的。

e)behavior。用它來控制屬性,預設為迴圈滾動,可選的值有alternate(交替滾動)、slide(幻燈片效果,指的是滾動一次,然後停止滾動)

 

 

3.例項

a)給滾動字幕加超連結。

 

這跟平時的超連結是完全一樣的。只要在文字外面加上<a href=***>和</a>就可以了。

 

程式碼如:

  1. <marquee scrollAmount=2 width=300><a href=http://www.vxia.net/>易捷部落格網</a></marquee>

效果如:

 

易捷部落格網

 

 

b)當滑鼠停留在文字上,文字停止滾動。

程式碼如:

  1. <marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>歡迎來到易捷部落格網!</marquee>

效果如:

 

歡迎來到易捷部落格網!

 

 

c)交替效果。

程式碼如:

  1. <marquee scrollAmount=2 width=300 behavior=alternate>歡迎來到易捷部落格網!</marquee>

效果如:

 

歡迎來到易捷部落格網!

 

 

d)多行文字向上滾動。

程式碼如:

  1. <marquee scrollAmount=2 width=300 height=160 direction=up>·您好!<br>·歡迎來到易捷部落格網!<br>·這是一段多行文字向上滾動程式碼。<p>·<a href=http://www.vxia.net/>易捷部落格網</a></marquee>

效果如:

 

 

·您好!
·歡迎來到易捷部落格網!
·這是一段多行文字向上滾動程式碼。

·易捷部落格網

 

如果網頁經過了FrontPage編輯,儲存之後,只能滾動一行,這時候發現原來的程式碼順序已經變了。解決的辦法是,找出原來的程式碼,把它嵌入到JavaScript的document.write中即可,上述程式碼寫為:

 

  1. <script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>·您好!<br>·歡迎來到易捷部落格網!<br>·這是一段多行文字向上滾動程式碼。<p>·<a href=http://www.vxia.net/>易捷部落格網</a></marquee>')< /script>

 

 

e) 用樣式表來控制改變滾動字幕的顏色。

 

程式碼如:

  1. <marquee scrollAmount=2 width=300><a style=color:CC6600>歡迎來到易捷部落格網</a></marquee>

效果如:

 

 

歡迎來到易捷部落格網 

 

圖片滾動

用<img src=相對路徑/檔名>的語句。並且要注意圖片名不要中文,要注意區分英文大小寫。

 

 

圖片做超連結

用<a href=>和</a>把<img>包圍,並且img必須設border=0,否則圖片會出現藍框。

 

 

正確的例子如:

 

<a href=http://www.vxia.net/><img src=../../j/01.jpg border=0></a>

其中a href=表示超連結,這是最常用的。練習的方法也很簡單,就是平時用FP或DW做網頁的時候,要多檢視原始碼。

 

 

多張圖片排列滾動

通常圖片和圖片之間用<br>(回行)或<p style=margin-top:9>(精確調整圖片間的距離)來連結。也可以把你的圖片先用表格排版,然後把這個表格的所有語句也加入到marquee中,讓這個表格來滾動。

程式碼如:

 

  1. <script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()><a href=http://www.vxia.net/><img src="http://vxia.net/image/hacker.gif" border=0></a></marquee>')</script>

 

效果如: