javascript
marquee 和JS 滚动效果
?一、marquee標簽的幾個重要屬性：
? ? ? ? ?1.direction：滾動方向(包括4個值：up、down、left、right)
? ? ? ? ? ? 說明：up：從下向上滾動；down：從上向下滾動；left：從右向左滾動；right：從左向右滾動。
? ? ? ? ? ? 語法：<marquee direction="滾動方向">...</marquee>
? ? ? ? ?2.behavior：滾動方式(包括3個值：scroll、slide、alternate)
? ? ? ? ? ? 說明：scroll：循環(huán)滾動，默認效果；slide：只滾動一次就停止；alternate：來回交替進行滾動。
? ? ? ? ? ? 語法：<marquee behavior="滾動方式">...</marquee>
? ? ? ? ?3.scrollamount：滾動速度(滾動速度是設置每次滾動時移動的長度，以像素為單位)
? ? ? ? ? ? 語法：<marquee scrollamount="5">...</marquee>
? ? ? ? ?4.scrolldelay:設定滾動兩次之間的延遲時間，值大了會有一步一停頓的效果(設置滾動的時間間隔，單位是毫秒)
? ? ? ? ? ? 語法：<marquee scrolldelay="100">...</marquee>
? ? ? ? ?5.loop：設定滾動循環(huán)的次數(shù)(默認值是-1，滾動會不斷的循環(huán)下去)
? ? ? ? ? ? 語法：<marquee loop="2">...</marquee>? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ?<marquee loop="-1" bgcolor="#CCCCCC">我會不停地走。</marquee>
? ? ? ? ? ? ? ? ? ? ? ? ?<marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>
? ? ? ? ?6.width、height：設定滾動字幕的寬度、高度
? ? ? ? ? ? 語法：<marquee width="500" height="200">...</marquee>
? ? ? ? ?7.bgcolor：設定滾動字幕的背景顏色(可以是顏色值，也可以是rgb()或rgba()函數(shù))
? ? ? ? ? ? 語法：<marquee bgcolor="rgba(0,0,0,0.2)">...</marquee>
? ? ? ? ? 8.hspace、vspace：空白空間(相當于設置margin值)
? ? ? ? ? ? ?說明：hspace：設定活動字幕里所在的位置距離父容器水平邊框的距離，如hspace=“10”，即等同于：margin：0 10px；
? ? ? ? ? ? ? ? ? ? ? ? ?vspace：設定活動字幕里所在的位置距離父容器垂直邊框的距離，如vspace=“10”，即等同于：margin：10px 0；
? ? ? ? ? ? ?語法：<marquee hspace="10" ?vspace="10">...</marquee>(等同于：margin：10px；)
? ? ? ? ? 9.align：設定滾動字幕內(nèi)容的對齊方式(包括9個值：absbottom、absmiddle、baseline、bottom、left、middle、right、 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? texttop、top)
? ? ? ? ? ? ? 說明：absbottom：絕對底部對齊（與g、p等字母的最下端對齊）
? ? ? ? ? ? ? ? ? ? ? ? ? absmiddle：絕對中央對齊
? ? ? ? ? ? ? ? ? ? ? ? ? baseline：底線對齊
? ? ? ? ? ? ? ? ? ? ? ? ? bottom：底部對齊（默認）
? ? ? ? ? ? ? ? ? ? ? ? ? left：左對齊
? ? ? ? ? ? ? ? ? ? ? ? ? middle：中間對齊
? ? ? ? ? ? ? ? ? ? ? ? ? right：右對齊
? ? ? ? ? ? ? ? ? ? ? ? ? texttop：頂線對齊
? ? ? ? ? ? ? ? ? ? ? ? ? top：頂部對齊
? ? ? ? ? ? ? ? ?語法：<marquee align="對齊方式">...</marquee>
? ? ? ? ? ?10.face：設定滾動字幕的文字字體
? ? ? ? ? ? ? ? 語法：<marquee font="楷體_GB2312"></marquee>
? ? ? ? ? ?11.color：設定滾動字幕的文字顏色
? ? ? ? ? ? ? ??語法：<marquee color="#333"></marquee>
? ? ? ? ? ?12.size：設定滾動字幕的文字字號
? ? ? ? ? ? ? ??語法：<marquee size="3"></marquee>
? ? ? ? ? ?13.STRONG：設定滾動字幕的文字加粗
? ? ? ? ? ? ? ??語法：<marquee STRONG></marquee>
? ? ? ??? 二、marquee常用到的兩個事件：
? ? ? ? ? ? ? ?onMouseOut="this.start()"?用來設置鼠標移出該區(qū)域時繼續(xù)滾動
? ? ? ? ? ? ? ?onMouseOver="this.stop()"?用來設置鼠標移入該區(qū)域時停止?jié)L動
? ? ? ? ? ? ? ?<marquee onMouseOut="this.start()" onMouseOver="this.stop()">marquee常用到的兩個事件</marquee>?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? 完整代碼如下：
? ? ? ? ? ?<marquee id="affiche" 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()">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head><body> <div> <marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10"> 指整個Marquee對齊方式; (2)behavior:設置滾動的方式: scroll:表示由一端滾動到另一端,會重復,缺陷是不能無縫滾動。 slide:表示由一段滾動到另一端,不會重復... </marquee> </div> </body> </html>
marquee 標簽的鼠標放上去滾動效果 鼠標離開繼續(xù)滾動
這也是筆者剛發(fā)現(xiàn)的一個marquee的寫法，應該說這個效果很實用，可以輕松的實現(xiàn)鼠標放上去停止?jié)L動、鼠標離開繼續(xù)滾動的效果。下面是具體的用法（特別注意onMouseOver和onMouseOut是需要同時寫進去才會出現(xiàn)比較好的效果）：onMouseOut="this.start()" ：用來設置鼠標移出該區(qū)域時繼續(xù)滾動
onMouseOver="this.stop()"：用來設置鼠標移入該區(qū)域時停止?jié)L動代碼如下:<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用來設置鼠標移出該區(qū)域時繼續(xù)滾動 onMouseOver="this.stop()"：用來設置鼠標移入該區(qū)域時停止?jié)L動</marquee>這是一個完整的例子：代碼如下:<marquee id="affiche" 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()"> 這是一個完整的例子 </marquee>該標簽支持的屬性多達11個：align 設定<marquee>標簽內(nèi)容的對齊方式 absbottom：絕對底部對齊（與g、p等字母的最下端對齊） absmiddle：絕對中央對齊 baseline：底線對齊 bottom：底部對齊（默認） left：左對齊 middle：中間對齊 right：右對齊 texttop：頂線對齊 top：頂部對齊代碼如下:<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：? 表示由一端滾動到另一端，不會重復。代碼如下:<marquee behavior="alternate">alternate：表示在兩端之間來回滾動。 </marquee> <marquee behavior="scroll">scroll：表示由一端滾動到另一端，會重復。</marquee> <marquee behavior="slide">slide：? 表示由一端滾動到另一端，不會重復。</marquee>bgcolor 設定活動字幕的背景顏色，背景顏色可用RGB、16進制值的格式或顏色名稱來設定。代碼如下:<marquee bgcolor="#006699">設定活動字幕的背景顏色 bgcolor="#006699"</marquee> <marquee bgcolor="RGB(10%,50%,100%,)">設定活動字幕的背景顏色 bgcolor="rgb(10%,50%,100%,)"</marquee> <marquee bgcolor="red">設定活動字幕的背景顏色 bgcolor="red"</marquee>direction 設定活動字幕的滾動方向代碼如下:<marquee direction="down">設定活動字幕的滾動方向direction="down"：向下</marquee> <marquee direction="left">設定活動字幕的滾動方向direction="left"：向左</marquee> <marquee direction="right">設定活動字幕的滾動方向direction="right"：向右</marquee> <marquee direction="up">設定活動字幕的滾動方向direction="up"：向上</marquee>height 設定活動字幕的高度代碼如下: <marquee height="500" direction="down" bgcolor="#CCCCCC">設定活動字幕的高度height="500"</marquee>width 設定活動字幕的寬度代碼如下: <marquee width="500" bgcolor="#CCCCCC">設定活動字幕的寬度width="500"</marquee>hspace 設定活動字幕里所在的位置距離父容器水平邊框的距離 This controls the horizontal（水平）space around the display box.代碼如下:<table width="500" border="1" align="center" cellpadding="0" cellspacing="0"><tr><td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td></tr></table>vspace 設定活動字幕里所在的位置距離父容器垂直邊框的距離 This controls the vertical（垂直） space around the display box.代碼如下: <marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>loop 設定滾動的次數(shù)，當loop=-1表示一直滾動下去，默認為-1代碼如下:<marquee loop="-1" bgcolor="#CCCCCC">我會不停地走。</marquee> <p> </p> <marquee loop="2" bgcolor="#CCCCCC">我只走兩次哦</marquee>scrollamount 設定活動字幕的滾動速度，單位pixels代碼如下:<marquee scrollamount="10" >scrollamount="10" </marquee> <marquee scrollamount="20" >scrollamount="20" </marquee> <marquee scrollamount="30" >scrollamount="30" </marquee>scrolldelay 設定活動字幕滾動兩次之間的延遲時間，單位millisecond（毫秒） 值大了會有一步一停頓的效果代碼如下:<marquee scrolldelay="10" >scrolldelay="10" </marquee> <marquee scrolldelay="100" > scrolldelay="100"</marquee> <marquee scrolldelay="1000">scrolldelay="1000" </marquee>=============================================================================== marquee實現(xiàn)首尾相連循環(huán)滾動效果（）： 代碼如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" οnmοuseοver="this.stop();" οnmοuseοut="this.start();"> 這里是要滾動的內(nèi)容 </marquee>======================基本示例==================================================== <marquee direction="down" loop="-1" truespeed="truespeed" height="300px" behavior="scroll" scrollamount="3" scrolldelay="100"> <p><a href="">hellohellohellohellohellohellohellohellohellohello</a></p> <p>hellohellohellohellohellohellohellohellohellohello</p> <p>hellohellohellohellohellohellohellohellohellohello</p> <p>hellohellohellohellohellohellohellohellohellohello</p> <p>hellohellohellohellohellohellohellohellohellohello</p> <p>hellohellohellohellohellohellohellohellohellohello</p> <p>hellohellohellohellohellohellohellohellohellohello</p> </marquee> =============================以下是JS實現(xiàn)無縫滾動效果=================================
該插件提供了許多屬性選項，您可以配置定制外觀和效果。
- {? ????????
- yScroll:?"top"????????//?初始滾動方向?(還可以是"top"?或?"bottom")? ???????,
- showSpeed:?850????????//?初始下拉速度? ???????,
- scrollSpeed:?12???????//?滾動速度? ???????,
- pauseSpeed:?5000??????//?滾動完到下一條的間隔時間? ???????,
- pauseOnHover:?true????//?鼠標滑向文字時是否停止?jié)L動? ???????,
- loop:?-1??????????????//?設置循環(huán)滾動次數(shù)?（-1為無限循環(huán)）? ???????,
- fxEasingShow:?"swing"??//?緩沖效果? ???????,
- fxEasingScroll:?"linear"??//?緩沖效果? ???????,
- cssShowing:?"marquee-showing"??//定義class? ? ???????//
- event?handlers? ???????,
- init:?null????????????????//?初始調(diào)用函數(shù)? ???????,
- beforeshow:?null???????????//?滾動前回調(diào)函數(shù)? ???????,
- show:?null?????????????????//?當新的滾動內(nèi)容顯示時回調(diào)函數(shù)? ???????,
- aftershow:?null????????????//?滾動完了回調(diào)函數(shù)?
總結(jié)
以上是生活随笔為你收集整理的marquee 和JS 滚动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 雷军20+年前作文：我会当一辈子程序员
- 下一篇： 原生JS-旋转木马