導航:首頁 > 萬維百科 > 網站中的滾動文本怎麼設計

網站中的滾動文本怎麼設計

發布時間:2020-12-01 08:07:15

1、網頁設計中 怎樣讓滾動的文字在滑鼠移到它時停下

<SCRIPT language=JavaScript>

var marqueewidth=160

var marqueeheight=120

var speed=1

var marqueecontents=

ef="<div class=bbb ><center>公 告</center> 公司網站正在更新之中,如果瀏覽出現問題,請與管理員聯系。謝謝!!"

if(document.all)

document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')

function regenerate(){window.location.reload()

}function regenerate2(){if(document.layers){setTimeout("window.onresize=regenerate",450)

intializemarquee()

}}function intializemarquee(){document.cmarquee01.document.cmarquee02.document.write(marqueecontents)

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.height

scrollit()

}function scrollit(){if(document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){document.cmarquee01.document.cmarquee02.top-=speed

setTimeout("scrollit()",100)

}else{document.cmarquee01.document.cmarquee02.top=marqueeheight

scrollit()

}}window.onload=regenerate2

</SCRIPT>

2、網頁設計:如何創建一個滾動菜單

首先打開dreamweaver8寫基本語法
<marquee>滾動文字 </marquee>
2.文字移動屬性的設置
(1)滾動方向屬性direction
可以設定文字滾動的方向,分別為向左(left)、向右(right)、向上(up)、向下(down),使滾動的文字具有更多的變化。
基本語法:
<marquee direction="value">滾動文字</marquee>
(2)滾動方式屬性behavior
通過這個屬性能夠設定不同方式的滾動文字效果。如滾動的循環往復、交替滾動、單次滾動等。
基本語法:
<marquee behavior="value">滾動文字</marquee>
(3)滾動循環屬性loop
通過這個屬性能夠讓文字滾動循環進行。
基本語法:
<marquee loop="次數">滾動文字</marquee>
(4)滾動速度屬性scrollamout
通過這個屬性能夠調整文字滾動的速度。
基本語法:
<marquee scrollamount="value">滾動文字</marquee>
(5)滾動延遲屬性scrolldelay
通過這個屬性,可以在每一次滾動的間隔產生一段時間的延遲。
基本語法:
<marquee scrolldelay="value">滾動文字</marquee>
3.外觀(Layout)設置
(1)滾動文字對齊方式align
基本語法:
<marquee align="對齊方ottom,對齊上沿、中間、下沿。
(2)滾動背景顏色屬性bgcolor

在滾動文字的後面,可以添加背式">滾動文字</marquee>
對方方式=top、middle、b景顏色。
基本語法:
<marquee bgcolor="color_value">滾動文字</marquee>

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

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

4、如何製作網頁設計中的滾動字條

網頁中的滾動字可以使用marquee標簽包裹在設置一些屬性.可以設置方向和速度,這個百度可以找到文檔

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

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


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


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


滾動的優點:

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

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

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

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

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

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


滾動的缺點


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

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

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

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

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

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

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

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

...包括頻繁更新或新內容(如博客)

...有很多信息以單一的方式呈現,以便理解(如信息圖)

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

滾動最佳實踐

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

7、關於網頁設計中滾動欄的製作。。

看我這個,簡單的。

說明:1、你放的內容再多表面上會在Dreamweaver中撐破,但是在瀏覽器是正常
2、這個就是marquee的用法,height 、width定義了滾動的范圍,具體的你可以在百度查

<marquee direction=left height=100 scrollamount=1 scrolldelay=2 width=600>
這里放置要滾動的內容,表格、圖片、文字都可以
</marquee>

8、網頁設計字體滾動代碼?

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

與網站中的滾動文本怎麼設計相關的知識