用JavaScript製作活動字幕

來源:互聯網
上載者:User

 活動字幕是網頁中經常使用的組件之一,它能使整個網頁更有動感,顯得很有生氣。現在的網站中也越來越多地使用活動字幕來加強網頁的互動性。用JavaScript編程可以實現各種活動字幕效果,所需的代碼很少,確實能夠以較少的下載時間換來較好的效果。該標記文法格式如下:

  <marquee

  aligh=left/center/right/top/bottom

  bgcolor=#n

  font=n

  direction=left/right/up/down

  behavior=type

  height=n

  hspace=n

  scrollamount=n

  Scrolldelay=n

  width=n

  VSpace=n

  loop=n>

  可以看出由於活動字幕的顯示方式多種多樣,可選的參數也很多。

  Bgcolor:用於設定活動字幕的背景顏色,一般是十六進位數。

  Behavior:用於設定滾動的方式,主要由三種方式:behavior="scroll"表示從一端滾動到另一端;behavior="slide"表示從一端快速滑動到另一端,且不重複;behavior="alternate"表示在兩端之間來復原動。

  Hspace和vspace:分別用於設定滾動字幕的左右邊框和上下邊框的寬度。

  Scrollamount:用於設定活動字幕一次滾動的距離。

  scrolldelay:用於設定滾動兩次之間的延遲時間。

  Loop:用於設定滾動的次數,當loop=-1表示一直滾動下去,直到頁面更新。

  <marquee>標記的預設情況是向左滾動無限次,字幕高度是文本高度,滾動範圍:水平滾動的寬度是當前位置的寬度;垂直滾動的高度是當前位置的高度。下面是兩個通過JavaScript編程實現特殊效果活動字幕的指令碼代碼:

  ★帶連結的水平滾動字幕★

  帶連結的水平滾動字幕一般用於廣告宣傳,非常醒目:

  <script language="JavaScript">

  var marqueewidth=400

  var marqueeheight=20

  var speed=4

  var marqueecontents='<strong><big>歡迎訪問<a >中國電腦教育報網站</a>歡迎您光臨<a mailto:net@cc">給我來封信!</a></big></strong></font>'

  document.write('<marquee scrollAmount='+speed+'

  >'+marqueecontents+'</marquee>')

  </script>

  ★帶連結的垂直滾動字幕★

  垂直滾動的活動字幕常用於以滾動方式發布新聞。指令碼代碼中參數“behavior、derection、width、height、scrollamount、scrolldelay”分別確定了活動字幕的滾動方式、滾動方向、寬度、高度、一次滾動距離、延遲時間等,另外參數“onmouseover='this.stop()'”所實現的效果是當滑鼠指標移動到活動字幕上時,字幕停止滾動,參數“onmouseout='this.start()'”恰好與之相反。

  <script language=vbScript>document.write("<marquee behavior=scroll direction=up width=130 height=80 scrollamount=1 scrolldelay=60 onmouseover='this.stop()' onmouseout='this.start()'>")</script>

  <p><a >

  </a><br>

  <a >~=~>>畢業班學生下周離校</a><br>

  <a >~=~>>7月10日放暑假</a><br>

  <a >~=~>>省水利年會在我校召開</a><br><br>

  <script language=vbScript>document.write

  ("</marquee>")</script>

  </p>

  將上述代碼嵌入網頁中的適當位置,並改變連結內容即可得到一個滾動的新聞公告欄。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.