html marquee標簽設置圖片滾動效果的方法

小編給大家分享一下html 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="https://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標記不僅可以移動文字，也可以移動圖片，表格等.

看完了這篇文章，相信你對html marquee標簽設置圖片滾動效果的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！