導航:首頁 > 萬維百科 > 網頁設計滾動字體
網頁設計滾動字體
發布時間：2020-12-06 04:05:231、Dreamweaver製作網頁時的圖片字體滾動效果怎麼編寫代碼?
1.<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount="2" direction="up" behavior="scroll">把你的內容放這里</marquee>這個代碼是比較簡單的示例，會有空白，如果不想有空白的話還是需要JS的。
2.<MARQUEE scrollAmount=1 scrollDelay=1 direction=right width=180 height=250><IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0> <IMG src="圖片網址" width=180 border=0>
<DIV></DIV></MARQUEE></CENTER>
數值可以變換，數值的變換可以影響圖片速度的滾動！圖片滾動方向也可以換！都是簡單的英語單詞，大家在變換的時候應該沒有問題
上下滾動圖片代碼:
代碼：<CENTER>
<MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=170 height=250>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV>
<DIV align=center><IMG src="圖片網址" width=300 border=0></DIV></MARQUEE></CENTER>
註：direction方向 可UP可DOWN 寬高 可以換
2、請教：如何在網頁中製作滾動圖片和滾動字幕？謝謝！
/**
* 文字上下滾動
* @param flag 標識是否滾動
* @param fatherMarqueeContentId 父容器
* @param firMarqueeContentId 子容器1
* @param secMarqueeContentId 子容器2
* @param timeSpan 滾動時間間隔 默認為毫秒
*/
var MarqueeObj = function(fatherMarqueeContentId,firMarqueeContentId,secMarqueeContentId,timeSpan) {
this.flag = 0;
this.fatherMarqueeContentId = fatherMarqueeContentId;
this.firMarqueeContentId = firMarqueeContentId;
this.secMarqueeContentId = secMarqueeContentId;
this.timeSpan = timeSpan || 100;
//初始化，開啟循環滾動
this.init = function() {
initScrollContentHeight(this);
//定時器
setInterval(marquee,this.timeSpan);
this.bindMouseOver();
this.bindMouseOut();
}
//開始
this.start = function() {
this.flag = 0;
}
//停止
this.stop = function() {
this.flag = 1;
}
var that = this;
//滾動核心函數
var marquee = function() {
if(that.flag == 1)
{
return;
}
if(document.getElementById(that.firMarqueeContentId).offsetHeight
<= document.getElementById(that.fatherMarqueeContentId).scrollTop) {
document.getElementById(that.fatherMarqueeContentId).scrollTop
-= document.getElementById(that.firMarqueeContentId).offsetHeight;
} else {
document.getElementById(that.fatherMarqueeContentId).scrollTop ++;
}
}
this.bindMouseOver = function() {
document.getElementById(this.fatherMarqueeContentId).onmouseover
= function() {
that.stop();
}
}
this.bindMouseOut = function() {
document.getElementById(this.fatherMarqueeContentId).onmouseout
= function() {
that.start();
}
}
/**初始化可滾動內容的高度
* 將可滾動內容的高度和父容器的高度比較，如果低於它，
* 就將可滾動內容的高度置為父容器的高度
* @param obj 可滾動對象
*/
var initScrollContentHeight = function(obj){
if(document.getElementById(obj.firMarqueeContentId).scrollHeight
< document.getElementById(obj.fatherMarqueeContentId).offsetHeight){
document.getElementById(obj.firMarqueeContentId).style.height
= document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px";
document.getElementById(obj.secMarqueeContentId).style.height
= document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px";
}
}
}
3、如何製作網頁滾動文字
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>標簽的動態行為學習。
4、如何製作網頁設計中的滾動字條
網頁中的滾動字可以使用marquee標簽包裹在設置一些屬性.可以設置方向和速度，這個百度可以找到文檔
5、網頁製作中滾動字幕怎麼整？
可以用javascript實現 也可以用<marquee>滾動字幕內容</marquee> <marquee>標簽還有很多屬性 <marquee direction="up" id="mar" width="100%" height="220" onMouseOut="mar.start()" onMouseOver="mar.stop()" scrollAmount="1" scrollDelay="50" border="0" class="text"> <marquee> 比如這段代碼 就是個上下滾動的字母 而且有滑鼠懸停效果 javascript 網上有很多代碼 你可以自己去找
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、怎麼製作網頁滾動字幕
<style>
marquee{
width:500px;
height:100px;
background:gray;
color:red;
}
</style>
<marquee direction="up" scrollamount="1">
滾動文字direction="up"向上滾，down向下滾，left向左，right向右；scrollamount="1"滾動速度。
width設置寬，height高，background背景顏色，color文字顏色
</marquee>
8、製作網頁如何使字體滾動
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>
********************************************
********************************************
嗨, 啦啦啦，我會移動耶！大家好！
********************************************
與網頁設計滾動字體相關的知識
- 網頁設計中怎樣鏈接css
- 站長扣除是什麼意思
- 農機站長主要表現
- 權威的贛州網站建設
- 大客流值班站長的職責
- 二段煤氣爐站長招聘
- 表單在動態網頁設計中的作用
- 帝國cms瀑布流模板
- 網站建設功能需求有哪些
- 比較好的圖片設計網站有哪些
- cms對接網
- 簡單的網頁頁面設計用什麼軟體
- 競選廣播站長
- 傾世cms破解
- 鶴壁超限站站長
- 濟南產經報站長是什麼級別
- 網頁設計師能力
- cms是什麼牌子的點歌機
- 中國最牛逼的設計網站
- 收費站站長主要職能
- 新浪cms稿源系統指的是
- 400路終點站長鳴路
- 站長工具收入信息
- 魔方小站站長教學視頻6
- 朝宋站長爬牆
- 三毛室內設計網站
- 鐵路長沙站站長級別
- 網頁設計怎樣添加flash
- 簽名設計好網站
- 廣播站站長和大隊長
- cms是哪個監控
- 服裝設計網站哪個好
- 網站設計計劃
- 貓網頁設計
- 精通html5網頁設計
- 下一站長沙
- 路政副站長年度考核表
- 網站建設技術規范
- 自己設計旅行路線網站
- 誰有電商網站的mongodb設計
- 帝國cms變數標簽
- 河南省住房建設廳網站
- 設計裝修風格網站
- 上海高端網站建設服
- 新會邊檢站現任站長
- 福彩站長
- 帝國cms復選框
- 湖南腫瘤醫院離哪站長沙城鐵近