網頁設計實現文字橫向滾動_網頁設計文字滾動（水平）代碼

1、如何製作網頁滾動文字

4.3.1 設置文字滾動

HTML技術中使文字滾動的方法是使用雙標簽<marquee></marquee>。在HTML代碼中可使其作用區文字滾動，默認為從右到左，循環滾動。在D:web目錄下創建網頁文件，命名為mar.htm，編寫代碼如代碼4.15所示。

代碼4.15 文字滾動的設置：mar.htm

<html>
<head>

<title>文字滾動的設置</title>
</head>
<body>

<font size="5" color="#cc0000">

文字滾動示例（默認）：<marquee>做人要厚道</marquee>
</font>

</body>
</html>

圖4.15 設置文字滾動默認形式
從圖4.15可得，在未設置寬度時，<marquee></marquee>標簽是獨佔一行的。

4.3.2 設置文字滾動的方向

<marquee></marquee>標簽的direction屬性用於設置內容滾動方向，屬性值有left、right、up、down，分別代表向左、向右、向上、向下，例如以下代碼：

<marquee direction="left">做人要厚道</marquee>
<marquee
direction="right">做人要厚道</marquee>
<marquee
direction="up">做人要厚道</marquee>
<marquee
direction="down">做人要厚道</marquee>
4.3.3
設置文字滾動的速度和形式
設置文字滾動使用<marquee></marquee>標簽，其屬性說明如下。

— <marquee></marquee>標簽的scrollamount屬性用於設置內容滾動速度。
—
<marquee></marquee>標簽的behavior
屬性用於設置內容滾動方式，默認為scroll，即循環滾動，當其值為alternate時，內容將來回循環滾動。當其值為slide時，內容滾動一次即停止，不會循環。還有一個loop屬性可設置其滾動循環次數，默認為沒有限制。

— <marquee></marquee>標簽的scrolldelay屬性用於設置內容滾動的時間間隔。
—
<marquee></marquee>標簽的bgcolor屬性用於設置內容滾動背景色（類似於body的背景色設置）。
—
<marquee></marquee>標簽的width 屬性用於設置內容滾動背景寬度。
—
<marquee></marquee>標簽的height屬性用於設置內容滾動背景高度。

修改mar.htm網頁文件，編寫代碼如代碼4.16所示。

代碼4.16 文字滾動的設置：mar.htm

<html>
<head>
<title>文字滾動的設置</title>

</head>
<body>
<font size="3" color="#cc0000">

文字滾動示例（默認）：<marquee>做人要厚道</marquee>
文字滾動示例（向右）：<marquee
direction="right" scrolldelay="500">做人要厚道</marquee>

文字滾動示例（向下，滾動方式為slide，速度為10）：<marquee scrollamount="10"
behavior="slide">做人要厚道</marquee>

文字滾動示例（默認方向，滾動方式為alternate，循環3次，速度為2）：<marquee scrollamount="2"
behavior="alternate" loop="3">做人要厚道</marquee>

文字滾動示例（向上，背景色為#CCFF66，設置了背景寬度和高度）：<marquee direction="up"
bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>

</font>
</body>
</html>

在瀏覽器地址欄輸入http://localhost/mar.htm，瀏覽效果如圖4.16所示。

圖4.16 文字滾動的不同形式

<marquee></marquee>的眾多屬性能非常方便地製作滾動文字，在後面的JavaScript學習中，讀者將繼續深化<marquee></marquee>標簽的動態行為學習。

2、html網頁中圖片橫向滾動

1、有截取滾動網頁的軟體，如FSCapture，就可以截取整個網頁。

2、然後打開要截取的網頁，在FSCapture懸浮窗口上找到滾動截圖工具。

3、在默認情況下，是截整個界面，包括瀏覽器窗口，如果默認，下面有提示，點一下滑鼠左鍵即可。

4、如果要自定義截圖窗口，按住Ctrl鍵，就會出現一個紅色十字架，用滑鼠拖動這個紅十字架，框住想要的窗口。然後拖動右側的滾動條到上端，或者點下端的滾動箭頭，就能截取整個網頁。

5、完成截圖後，會自動返回到FSCapture編輯窗口，這時只要保存即可。

6、選擇一個保存文件夾，定義一個保存文件名，如滾動截圖，按保存。

7、再用普通的看圖軟體ACDSee打開，就能看到一個長長的網頁圖，看看長寬比930x1776。

3、網頁設計文字滾動（水平）代碼

網頁設計文字滾動（水平）代碼是：

<marquee direction=up scrollamount=1 scrolldelay=100

height=60>

<tr>

<td>

共和國

</table>

</marquee>

(3)網頁設計實現文字橫向滾動擴展資料：

一、除此之外，marquee參數有以下：

BGColor：滾動文本框的背景顏色。

Direction：滾動方向設置，可選擇Left、Right、up和down。

scrolldelay：每輪滾動之間的延遲時間，越大越慢。

scrollamount：一次滾動總的時間量，數字越小滾動越慢。

Behaviour：滾動的方式設置，三種取值：Scroll（循環滾動） lide（單次滾動）、Alternate（來回滾動）。

Align：文字的對齊方式設置。可選擇Middle(居中)、Bottom(居下)還是Top(居上)。

Width：滾動文本框的寬度，輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。

Height：滾動文本框的高度，輸入一個數值後從後面的單選框選擇in Pixels(按像素)或是in Percent(按百分比)。

loop：滾動次數。默認為infinite

hspace、vspace：前後、上下的空行。

二、滾動字幕在FrontPage的組件里有，但是FrontPage這個軟體只能支持單行文字，一出現多行文字它就無能為力了，而且它只能支持一行滾動。（如果出現只能滾動一行的情況，解決辦法是把這段代碼嵌入到JavaScript的document.write裡面。）

4、Dreamweaver圖片+文字橫向滾動代碼

<DIV id=demoleft style="OVERFLOW: hidden; WIDTH: 700px; COLOR: #ffffff">
<TABLE border=0 cellPadding=0 cellSpacing=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1left vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=2 border=0>
<TBODY>
<TR align=middle>
<TD><img src="images/sysx/tp1.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp2.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp3.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp4.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp5.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp6.jpg" width="100" height="89" /></TD>
<TD><img src="images/sysx/tp7.jpg" width="100" height="89" /></TD>
</TR>
<TR align=middle>
<TD>說明xxxxxxxx</TD>
<TD>說明xxxxxx</TD>
<TD>說明xxxxxxxx</TD>
<TD>說明xxxxxx</TD>
<TD>說明xxxxxx</TD>
<TD>說明xxxxxxx</TD>
<TD>說明xxxxxxx</TD>
</TR>

</TBODY></TABLE></TD>
<TD id=demo2left vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=20//速度數值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值
demo2left.innerHTML=demo1left.innerHTML
function Marquee(){
if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其實demo.scrollLeft是有最大值的，和demo0.width,引用的圖片的width有關系。demo過了一半（每半內容一樣的），重新開始循環
demoleft.scrollLeft-=demo1left.offsetWidth
else{
demoleft.scrollLeft++//不斷的增加，相當於父容器的滾動條不斷是縮小；但由於OVERFLOW: hidden; （滾動條不可見）
}
}
var MyMarleft=setInterval(Marquee,speed)
demoleft.onmouseover=function() {clearInterval(MyMarleft)}
demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}
</SCRIPT>

5、怎樣在網頁設計中把所需的文字從左到右滾動

14

<marquee>

width="300px"

height="200px"

behavior="scroll"

direction="left"

scrollamount="50"

loop="10"

限制滾動文字的范圍

限制滾動文字的范圍

限制滾動文字的行為（alternate：來回、scroll：循環滾動、slide：只滾動一次）

滾動的方向（left、right、down、up）

設置文字滾動的速度

設置滾動的次數
看看有用嗎？

6、js 實現如何文字橫向滾動

用：<MARQUEE>滾動文字</MARQUEE>可以實現你要的效果，

參數
direction 表示滾動的方向，值可以是left，right，up，down，默認為left
behavior 表示滾動的方式，值可以是scroll（連續滾動）slide（滑動一次）
alternate（來回滾動） loop 表示循環的次數，值是正整數，默認為無限循環
scrollamount 表示運動速度，值是正整數，默認為6
scrolldelay 表示停頓時間，值是正整數，默認為0，單位是毫秒
valign 表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle
align 表示元素的水平對齊方式，值可以是left，center，right，默認為left
bgcolor 表示運動區域的背景色，值是16進制的RGB顏色，默認為白色
height、width 表示運動區域的高度和寬度，值是正整數（單位是像素）或百分數，默認width=100% height為標簽內元素的高度
hspace、vspace 表示元素到區域邊界的水平距離和垂直距離，值是正整數，單位是像素。 onmouseover=this.stop() onmouseout=this.start() 表示當滑鼠移上區域的時候滾動停止，當滑鼠移開的時候又繼續滾動。

7、網頁文字左右滾動代碼？

這個要用到跑馬燈代碼<marquee></marquee>
裡面加個direction=left
再加個mousemove
和mouseover

8、HTML 無縫文字滾動怎麼做

上下無縫滾動代碼：
<div id="demo" style="height:50px;overflow:hidden;">
<div id="indemo" style="height:200%;">
<div id="demo1">
第一行字<br />
第二行字
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
speed = 100; //數字越大滾得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee(){
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop-=tab2.offsetHeight;
}else{
tab.scrollTop+=1;
}
}
var MyMar=setInterval(Marquee,speed);
</script>

左右橫向無縫滾動代碼

<table cellSpacing=0 cellPadding=0 width=100 align=center border=0>
<tr>
<td width=190 bgColor=#d6f6fd height=27></td>
<td bgColor=#d6f6fd height=27>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollAmount=2 scrollDelay=60 width=580 height=20>
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果1 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果2 [ 7/13/2012]
<a class="#" href="#" onclick="javascript:window.open('', 'newwindow')" title="\">橫向滾動的廣告效果3 [ 7/10/2012]
</marquee>
</td>
</tr>
</table>

9、網頁設計字體滾動代碼？

文字滾動是由<marquee></marquee>控制的。marquee的參數如下：

1、方向 <direction=#> #=left, right
如：<marquee direction=left>啦啦啦，我從右向左移！</marquee>
<marquee direction=right>啦啦啦，我從左向右移！</marquee>

2、方式 <bihavior=#> #=scroll, slide, alternate
如：<marquee behavior=scroll>啦啦啦，我一圈一圈繞著走！</marquee>
<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee>
<marquee behavior=alternate>啦啦啦，我來回走耶！</marquee>

3、循環 <loop=#> #=次數；若未指定則循環不止(infinite)
如：<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟喲！</marquee>
<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟喲！</marquee>
<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟喲！</marquee>

4、速度 <scrollamount=#>
如：<marquee scrollamount=20>啦啦啦，我走得好快喲！</marquee>

5、延時 <scrolldelay=#>
如： <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

6、對齊方式(Align) <align=#> #=top, middle, bottom
如：<font size=6>
<marquee align=# width=400>啦啦啦，我會移動耶！</marquee>
</font>
7、底色 <bgcolor=#>
#=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

如：<marquee bgcolor=aaaaee>啦啦啦，我會移動耶！</marquee>

8、面積 <height=# width=#>
如：<marquee height=40 width=50% bgcolor=aaeeaa> 啦啦啦，我會移動耶！</marquee>

9、空白(Margins)<hspace=# vspace=#>

<marquee id="scrollarea" direction="up" scrolldelay="10" scrollamount="1" width="150" height="80" onmouseover="this.stop();" onmouseout="this.start();">
------------------------------------------------------------------------------------------------------------------------------

<marquee></marquee>

以下是一個最簡單的例子：

代碼如下:

<marquee><font size=+3 color=red>Hello, World</font></marquee>

下面這兩個事件經常用到：

onMouseOut="this.start()" ：用來設置滑鼠移出該區域時繼續滾動

onMouseOver="this.stop()"：用來設置滑鼠移入該區域時停止滾動

代碼如下:

<marquee >onMouseOut="this.start()" ：用來設置滑鼠移出該區域時繼續滾動：用來設置滑鼠移入該區域時停止滾動</marquee>

這是一個完整的例子：

代碼如下:

<marquee align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" >

這是一個完整的例子

</marquee>

該標簽支持的屬性多達11個：

align

設定<marquee>標簽內容的對齊方式

absbottom：絕對底部對齊（與g、p等字母的最下端對齊）

absmiddle：絕對中央對齊

baseline：底線對齊

bottom：底部對齊（默認）

left：左對齊

middle：中間對齊

right：右對齊

texttop：頂線對齊

top：頂部對齊

導航:首頁 > 萬維百科 > 網頁設計實現文字橫向滾動

網頁設計實現文字橫向滾動

與網頁設計實現文字橫向滾動相關的知識