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

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、網頁設計文字滾動（水平）代碼

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

<marquee direction=up scrollamount=1 scrolldelay=100

height=60>

<tr>

<td>

共和國

</table>

</marquee>

(2)滾動網頁設計擴展資料：

一、除此之外，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裡面。）

3、網頁設計中怎麼在頁面中設置一個滾動條

css屬性 overflow-y:auto; DIV裡面的內容超過DIV的高度，右邊就會自動出現滾動條

1、用一個div，定製成圖中的寬度和高度
2、然後再把div的樣式設成overflow-y:scroll，當div里的文字超出那個高度的時候，滾動條就出來了。
例如：<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

4、網頁設計那個滾動字幕怎麼做

5、什麼是網頁設計中的滾動設計？如何進行滾動設計？

曾經的網站設計「禁忌」已經成為最受歡迎的技術之一，下面將討論一些滾動設計的利弊，並分析一些技巧。

滾動設計適合你的產品嗎？

每一種設計技巧和工具，都有喜歡這個概念的人和那些討厭它的人。在大多數情況下，任何一方都不是本質上對錯的；因此，在處理此類項目之前，權衡所有注意事項非常重要。

滾動的優點：

鼓勵互動 – 隨著不斷變化的元素不斷刺激，它可以是一種有趣的講故事方法，鼓勵用戶交互 - 尤其是高雅執行的視差滾動。

更快 – 長滾動比單擊復雜的導航路徑更快，並且不會減慢或限制用戶體驗。如Interaction Design Best Practices中所述，對時間的感知通常比實際時間的流逝更重要。

吸引用戶 – 易用性可促進交互性，增加現場時間。對於無限滾動網站尤其如此，您可以在其中幫助用戶發現他們可能甚至沒有想到的相關內容。

響應式設計 – 頁面設計在具有不同屏幕大小和功能的設備之間可能會變得復雜，但滾動有助於簡化差異。

手勢控制 – 滾動似乎與觸摸有著有機的聯系，因為向下輕掃比在屏幕上不同區域重復點擊要自然得多。用戶（尤其是移動設備）通常接受這一方式來顯示信息。

令人愉快的設計 – 不需要多次單擊即可獲得更快的交互，從而獲得更類似於應用或游戲的用戶體驗。

滾動的缺點

固執用戶 –一些用戶總是毫無理由地去抵制改變。盡管如此，該技術現在非常普遍（特別是在移動體驗期間），可以說大多數用戶都習慣了這種技術。

SEO缺點 - 只有一個頁面可能對網站的SEO產生負面影響。

迷失方向 - 滾動和內容之間的斷開可能會使用戶感到困惑或脫節。

導航困難 – "返回"頁面上的先前內容可能會很尷尬。為了對付這種情況，您可以創建一個持久的頂部導航，其中每個部分都錨定到頁面。

網站速度 – 視頻或圖像圖庫等大量內容可能會降低網站速度，尤其是視差滾動網站，它們依賴於 Javascript 和 jQuery

沒有頁腳 – 使用無限滾動網站，我們建議使用簡約的"粘性"頁腳，這樣您就不會犧牲可導航性。否則，用戶可能會因為頁面底部缺少進一步的導航而感到困惑。

撇開優點和缺點不談，某些類型的網站更適合長滾動設計。更長的滾動網站更適合……

...包含很大一部分移動流量（大多數用戶）

...包括頻繁更新或新內容（如博客）

...有很多信息以單一的方式呈現，以便理解（如信息圖）

...不包含富媒體，因為這可能導致負載時間的消耗

滾動最佳實踐

長滾動、視差效應和類似機制在設計領域中仍然比較新（約4年歷史），但仍從試錯經驗中可以獲取一些基本的最佳實踐。

從 2015 和 2016 的 Web 設計趨勢總結，以下是成功實現長滾動的一些日常技巧。

不用擔心短滾動和長滾動交替使用。讓內容決定滾動長度，而不是反過來。使用短滾動主頁和長滾動著陸頁（如產品，旅遊等）非常好（並且非常受歡迎）。

考慮粘性導航，以便用戶始終可以快速"返回"或從滾動中的元素跳轉到另一個元素。

將滾動與設計元素或工具結合，以便每個用戶都能快速了解網站的工作方式。箭頭、動畫按鈕或類似的用戶界面工具是幫助用戶確定下一步操作的有趣且簡單的方法。有些網站甚至包含一個小按鈕，其中包含"滾動更多"或"開始"等說明，來提高頁面的導航性。

明確區分滾動點擊和其他CTA元素，以便網站獲得所需的交互。

做一些研究，看看用戶如何與滾動交互。例如，在 Google 分析中，可以打開"網頁分析"選項卡，查看屏幕下方（第二屏及之後）用戶的點擊數。然後，你可以根據需要調整設計。

不要過分。長滾動並不意味著 500 頁的連續內容 - 長滾動也可以很簡單。講述你的故事，然後適可而止，不要喋喋不休。

專注於用戶目標，並接受即使是無限滾動網站也不是真正無窮無盡的。創建長滾動網站時，要了解用戶仍需要方向感（當前位置）和導航（其他可能的路徑）。

包括有助於在滾動中定位用戶的視覺提示，例如左下方用於「七種類型的摩托車騎手」站點的頭盔圖標。

滾動可能是一把雙刃劍，所以堅持使用它的建議用法，以避免它弊大於利。

平時用墨刀設計原型時候，可以直接拖動，增加頁面長度，進行滾動設計。

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

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

7、DW網頁設計中如何給整個網頁設置滾動條？

8、製作網頁中的滾動圖片，怎樣循環播放。

1.打開Dreamweaver創建新頁面，如圖：

2.插入如下代碼，如圖：

<%
set rs3=server.CreateObject("ADODB.RecordSet")
rs3.Source ="select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"
rs3.Open rs3.Source,conn,3,3
if not rs3.EOF Then
%>
<div align='center' id='demo' style='overflow:hidden;height:125px;width:990px;'>
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs3.EOF
fileExt=lcase(getFileExtName(rs3("picname")))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width=8 rowspan=3 > </TD>
<TD vAlign=top width=8><img src='Images/bg_0ltop.gif' width=10 height=10></TD>
<TD background=images/bg_01.gif></TD>
<TD vAlign=top width=7><img src='Images/bg_0rtop.gif' width=10 height=10></TD>
<TD width=7 rowspan=3 vAlign=top> </TD>
</TR>
<TR>
<TD background='Images/bg_03.gif'> </TD>
<TD align="center" bgcolor="#E9E9E9">
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<table style="TABLE-LAYOUT: fixed" height=80 cellSpacing=0 cellPadding=0 width=105 border=0>
<tr>
<td style="HEIGHT: 80px">
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><img src='<%=FileUploadPath & rs3("picname")%>' width='105' border=0></a>
</td>
</tr>
</table>
<%else if fileext="swf" then%>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='105' height='80'>
<param name=movie value='<%=FileUploadPath & rs3("picname")%>'>
<param name=quality value=high>
<param name='Play' value='-1'>
<param name='Loop' value='0'>
<param name='Menu' value='-1'>
<param name='wmode' value='transparent'>
<embed src='<%=FileUploadPath & rs3("picname")%>' width='105' height='80' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash'></embed>
</object>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'></a>
<%
end if
end If
%>
</TD>
<TD background='Images/bg_04.gif'> </TD>
</TR>
<TR>
<TD><img src='Images/bg_0lbottom.gif' width=10 height=10></TD>
<TD><img src='Images/bg_02.gif'></TD>
<TD><img src='Images/bg_0rbottom.gif' width=10 height=10></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan=3 align=center height=20 valign='top' background='Images/bg_05.gif'>
<a class=middle href='ReadNews.asp?NewsID=<%=rs3("NewsID")%>' target=_blank title='<%=rs3("title")%>'><%=CutStr(htmlencode4(rs3("title")),14)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs3.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if top_img >4 then%>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
<%
end if
else
Response.Write "暫無最新圖文"
end if
rs3.close
set rs3=nothing
%>

3.編寫完成代碼後查看預覽效果圖，如下：

注意事項:代碼中select top " & top_img & " * from "& db_News_Table &" where picnews=1 and checkked=1 and picname<>'null' order by NewsID DESC"根據網站的資料庫路徑來定義數據表，包括ID編號的降序和順序。

9、如何在網頁製作中將圖片設置為滾動

1、素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的；