html marquee標(biāo)簽設(shè)置圖片滾動效果的方法

小編給大家分享一下html marquee標(biāo)簽設(shè)置圖片滾動效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

要想設(shè)置圖片滾動，我們先了解幾個html marquee標(biāo)簽的屬性：

• innerHTML:     設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML

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

• scrollLeft:    設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

• scrollTop:     設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

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

• offsetHeight: 獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

• offsetLeft:    獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

• offsetTop:     獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

• offsetWidth:   獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度

能夠把這些弄清楚之后就來看看一個滾動實(shí)例吧：

<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 >

上面我已經(jīng)插了一張圖片了，效果是動態(tài)，截圖不太好看，但是我們也要看看，如圖：

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

html marquee標(biāo)簽的圖片滾動說明：

1.<marquee ></marquee >中間的內(nèi)容可以為 文字，圖片，也可以是由程序生成的文字或圖片

2.onMouseOut="this.start()" ：用來設(shè)置鼠標(biāo)移出該區(qū)域時繼續(xù)滾動

　　　 onMouseOver="this.stop()"：用來設(shè)置鼠標(biāo)移入該區(qū)域時停止?jié)L動

html marquee標(biāo)簽的圖片滾動代碼如下:

<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"： 底部對齊（默認(rèn)）。 </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：設(shè)定滾動的方式

• alternate： 表示在兩端之間來回滾動。

• scroll： 表示由一端滾動到另一端，會重復(fù)。

• slide：  表示由一端滾動到另一端，不會重復(fù)。

html marquee標(biāo)簽的圖片滾動代碼如下:

<marquee behavior="alternate">alternate：表示在兩端之間來回滾動。 </marquee>
<marquee behavior="scroll">scroll：表示由一端滾動到另一端，會重復(fù)。</marquee>
<marquee behavior="slide">slide：  表示由一端滾動到另一端，不會重復(fù)。</marquee>

bgcolor：設(shè)定活動字幕的背景顏色，背景顏色可用RGB、16進(jìn)制值的格式或顏色名稱來設(shè)定。

html marquee標(biāo)簽的好處：

頁面的自動滾動效果，可由javascript來實(shí)現(xiàn)，但是今天無意中發(fā)現(xiàn)了一個html標(biāo)簽 - <marquee></marquee>可以實(shí)現(xiàn)多種滾動效果，無需js控制。

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

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