網頁設計字體滾動

1、html中如何製作隨著屏幕滾動的文字（就是會跟著屏幕走的文字）

圖片滾動代碼 (從右向左滾動)

<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滾動的圖片地址1">

<img border="0" src=" http://要滾動的圖片地址2">

</marquee>

圖片滾動代碼 (從下往上滾動)

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll">

<img border="0" src=" http://要滾動的圖片地址1">

<img border="0" src=" http://要滾動的圖片地址2"> <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>
把圖片的連接地址寫在這里
</marquee>
1.direction屬性:決定文本的滾動方向，分為向左left和向右right，up和down默認狀態向左。
<marquee direction=left>從右向左滾動</marquee>
<marquee direction=right>從左向右滾動</marquee>
2.behavior屬性:指定文本的滾動方式，分為三種:
Scroll:從一端消失後，在另一端出現並繼續滾動。
<marquee behavior=scroll>一圈一圈地滾動</marquee>
Slide:從一端滾動，接觸到另一端後停止
<marquee behaviro=slide>只滾動一次就停止</marquee>
Alternate:從一端滾動到另一端後，反向滾動。
<marquee behavior=alternate>來回滾動</marquee>
direction=up（left、right、down） 這個屬性可以更改，這樣就可以實現上下左右了 但是.我建議用一種無縫的文字滾動.這樣的效果會比較好看.而用marquee就沒那麼好了方法代碼 先介紹一下它的實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到「無縫」滾動的目的。

先了解一下對象的幾個的屬性：
innerHTML:設置或獲取位於對象起始和結束標簽內的 HTML
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetWidth:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度

向上滾動的代碼：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//滑鼠移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑鼠移開時重設定時器
</script>

向下滾動：
<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollTop<=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向左滾動：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

向右滾動：
<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

2、製作網頁如何使字體滾動

http://www.gzsums.e.cn/webclass/html/marquee.html

以上是會動的文字網站。裡面有代碼。

基本語法

<marquee> ... </marquee>
<marquee>啦啦啦，我會移動耶！</marquee>
啦啦啦，我會移動耶！

文字移動屬性的設置

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

啦啦啦，我從左向右移！

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

啦啦啦，我只走一次就歇了！

啦啦啦，我來回走耶！

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

啦啦啦，我只走 3 趟喲！

啦啦啦，我只走 3 趟喲！

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

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

外觀(Layout)設置

對齊方式(Align) <align=#> #=top, middle, bottom
<font size=6>
<marquee align=# width=400>啦啦啦，我會移動耶！</marquee>
</font>
對齊上沿、中間、下沿。
啦啦啦，我會移動耶！對齊上沿。

啦啦啦，我會移動耶！對齊中間。

啦啦啦，我會移動耶！對齊下沿。

底色 <bgcolor=#>
#=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<marquee bgcolor=aaaaee>啦啦啦，我會移動耶！</marquee>
啦啦啦，我會移動耶！

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

空白(Margins)<hspace=# vspace=#>
********************************************<br>
嗨,
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我會移動耶！</marquee>
大家好！<br>
********************************************
********************************************
嗨, 啦啦啦，我會移動耶！大家好！
********************************************

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

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

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

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

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

14

<marquee>

width="300px"

height="200px"

behavior="scroll"

direction="left"

scrollamount="50"

loop="10"

限制滾動文字的范圍

限制滾動文字的范圍

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

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

設置文字滾動的速度

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

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

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

7、網站設計中，滾動字體的代碼是什麼？上下滾動和左右滾動，詳情代碼設置？謝謝

<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=7 direction=up width=270 height=77> 滾動的文字</marquee>
direction=up（上）down（下）left（左）right（右）