html marquee標籤如何設定圖片滾動?marquee標籤的圖片滾動代碼執行個體

來源:互聯網
上載者:User
本篇文章主要介紹了關於html marquee標籤的屬性及其marquee標籤的圖片滾動用法執行個體,大家可以多實驗實驗,這樣效果會更好。下面就讓我們一起來看這篇文章吧

要想設定圖片滾動,我們先瞭解幾個html marquee標籤的屬性:

  • innerHTML: 設定或擷取位於對象起始和結束標籤內的 HTML

  • scrollHeight: 擷取對象的滾動高度。

  • scrollLeft: 設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離

  • scrollTop: 設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離

  • scrollWidth: 擷取對象的滾動寬度

  • offsetHeight: 擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度

  • offsetLeft: 擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置

  • offsetTop: 擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置

  • offsetWidth: 擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度

能夠把這些弄清楚之後就來看看一個滾動執行個體吧:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()"> 需要滾動的文字 需要滾動的文字 也可以程式碼<img src="http://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"> </marquee >

上面我已經插了一張圖片了,效果是動態,不太好看,但是我們也要看看,

這個是無縫滾動的。我們要把裡面的屬性瞭解了之後才能知道原理。其實也不是很難,

html marquee標籤的圖片滾動說明:

1.<marquee ></marquee >中間的內容可以為 文字,圖片,也可以是由程式產生的文字或圖片

2.onMouseOut="this.start()" :用來設定滑鼠移出該地區時繼續滾動

    onMouseOver="this.stop()":用來設定滑鼠移入該地區時停止滾動

html marquee標籤的圖片滾動代碼如下:

<marquee align="absbottom">align="absbottom":絕對底部對齊(與g、p等字母的最下端對齊)。 </marquee><marquee align="absmiddle">align="absmiddle": 絕對中央對齊。 </marquee><marquee align="baseline">align="baseline": 底線對齊。 </marquee><marquee align="bottom">align="bottom": 底部對齊(預設)。 </marquee><marquee align="left">align="left": 靠左對齊。 </marquee><marquee align="middle">align="middle": 中間對齊。 </marquee><marquee align="right">align="right": 靠右對齊。 </marquee><marquee align="texttop">align="texttop": 頂線對齊。 </marquee><marquee align="top">align="top": 頂部對齊。 </marquee>
  • behavior:設定滾動的方式

  • alternate: 表示在兩端之間來復原動。

  • scroll: 表示由一端滾動到另一端,會重複。

  • slide: 表示由一端滾動到另一端,不會重複。

html marquee標籤的圖片滾動代碼如下:

<marquee behavior="alternate">alternate:表示在兩端之間來復原動。 </marquee><marquee behavior="scroll">scroll:表示由一端滾動到另一端,會重複。</marquee><marquee behavior="slide">slide:  表示由一端滾動到另一端,不會重複。</marquee>

bgcolor:設定活動字幕的背景顏色,背景顏色可用RGB、16進位值的格式或顏色名稱來設定。

html marquee標籤的好處:

頁面的自動滾動效果,可由javascript來實現,但是今天無意中發現了一個html標籤 - <marquee></marquee>可以實現多種滾動效果,無需js控制。

使用marquee標記不僅可以移動文字,也可以移動圖片,表格等.

相關文章

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.