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

網頁文字滾動設計

 發布時間：2020-11-26 17:38:23

1、電腦網頁設計HTML 滾動文字 怎麼用滾動方向把文字設計成波浪效果

用css3動畫實現。使用transform屬性

2、怎麼製作網頁動態滾動文字...

用marquee即可
比如：
<marquee direction="right" behavior="scroll" scrollamount="10" scrolldelay="200">這是一個滾動字幕</marquee>
在裡面加入marquee裡面加入herf標簽，應該就能實現滾動鏈接裡面添加愛鏈接，marqueen之間也可以和資料庫連接

3、製作網頁時怎麼添加滾動的文本

使用<Marquee>…</Marquee>標簽來顯示一個滾動的選取框，
文本可以實現動態滾動的效果。
<Marquee>…</Marquee>有多個具體屬性來對滾動效果進行設置。
Align：文本和背景的對齊方式。如：align=left
Behavior：運動方式。如：behavior = scoll
bgcolor ：背景顏色。如bgcolor = 「#cccccc」。
direction：滾動方向。如direction = left。
height、hspace：背景的高度和在頁面所處的位置。如：height = 20
hspace = 50。
loop：循環次數。如loop = infinite，表示無限循環。
scrollamount：每次移動的距離。Scolldelay：移動速度。
如：scrollamount = 10 scolldelay = 50
vspace：背景在頁面上下的位置；width：背景的寬度。
如：vspace = 50 width = 500。
3）代碼示例：
<marquee align=left behavior = scoll bgcolor = "#bbbbbb"
direction = left height = 20 hspace = 50 loop = infinite
scrollamount = 10 scolldelay = 50 vspace = 50 width = 500 >
HELLO BOY！</marquee>

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

首先讓我們認識這個<marquee>標簽，它是成對出現的標簽，首標簽<marquee>和尾標簽</marquee>之間的內容就是滾動內容。<marquee>標簽的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。
behavior屬性

behavior屬性的參數值為alternate、scroll、slide中的一個，分別表示文字來回滾動、單方向循環滾動、只滾動一次，需要注意的是：如果在<marquee>標簽中同時出現了direction和behavior屬性，那麼scroll和slide的滾動方向將依照direction屬性中參數的設置。如下所示：

<marquee behavior="alternate">我來回滾動</marquee>

我來回滾動

<marquee behavior="scroll">我單方向循環滾動</marquee>

我單方向循環滾動

<marquee behavior="scroll" direction="up" height="30">我改單方向向上循環滾動</marquee>

我改單方向向上循環滾動

<marquee behavior="slide">我只滾動一次</marquee>

我只滾動一次

<marquee behavior="slide" direction="up">我改向上只滾動一次了</marquee>

我改向上滾動一次了

bgcolor屬性

文字滾動范圍的背景顏色，參數值是16進制（形式：#AABBCC或#AA5566等）或預定義的顏色名字（如red、yellow、blue等）。如下所示：

<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是紅色的</marquee>

我的背景色是紅色的

direction屬性

文字滾動的方向，屬性的參數值有down、left、right、up共四個單一可選值，分別代表滾動方向向下、向左、向右、向上。如下所示：

<marquee direction="right">我向右滾動</marquee>

我向右滾動

<marquee direction="right">我向下滾動</marquee>

我向下滾動

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

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>標簽的動態行為學習。  

6、設計網頁，用滾動字幕顯示為：「xxxx」。 （要求文字上、下、左、右交替滾動）該怎麼寫代碼

上下交替滾動代碼：

<marquee behavior="alternate" direction="down" bgcolor="#aaaaee" align="middle" scrolldelay="120">歡迎您的光臨！</marquee>


左右交版替滾動代權碼：

<marquee behavior="alternate" direction="left" bgcolor="#aaaaee" align="middle" scrolldelay="120">歡迎您的光臨！</marquee>

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

文字滾動是由<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：頂部對齊

與網頁文字滾動設計相關的知識