html marquee標籤如何設定圖片滾動？ marquee標籤的圖片滾動代碼實例

本篇文章主要介紹了關於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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"  class="lazy"   alt="html marquee標籤如何設定圖片滾動？ marquee標籤的圖片滾動代碼實例" >
　</marquee >

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

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

html marquee標籤的圖片捲動說明：

1.中間的內容可以為文字，圖片，也可以是程式產生的文字或圖片

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>可以實現多種滾動效果，無需js控制。

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

【小編推薦】

html中的字體顏色怎麼設定？ css設定字體顏色方法介紹

html a標籤怎麼設定顏色？超連結的顏色設定總結（css樣式）

以上是html marquee標籤如何設定圖片滾動？ marquee標籤的圖片滾動代碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！