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

HTML滾動文字代碼 marquee標簽

asc span www 方式 ont stop 路徑 scroll dot

看到一個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>

效果如:

技術分享圖片

HTML滾動文字代碼 marquee標簽