註冊
登錄
首頁
論壇版規
禁止列表
說明
地圖
數位書香
私人消息 (0)
公共消息 (0)
論壇任務 (0)
系統消息 (0)
好友消息 (0)
帖子消息 (0)
麻辣家族討論版版
»
JavaScript
» (教學第37篇) 堆疊 下篇
返回列表
下一主題
上一主題
發帖
[教學]
(教學第37篇) 堆疊 下篇
小誌
發短消息
加為好友
小誌
(小誌)
當前離線
曾經也是水電工
UID
9
帖子
1195
主題
395
精華
113
積分
1747
金錢
1747
點名
0
作業系統
Vista
軟體版本
Office 2003
閱讀權限
200
性別
男
來自
台灣
在線時間
491 小時
註冊時間
2010-5-1
最後登錄
2025-7-7
暱稱:
小誌
頭銜:
曾經也是水電工
管理員
帖子
1195
主題
395
精華
113
積分
1747
點名
0
作業系統
Vista
軟體版本
Office 2003
閱讀權限
200
性別
男
來自
台灣
註冊時間
2010-5-1
最後登錄
2025-7-7
1
#
跳轉到
»
正序看帖
打印
字體大小:
t
T
發表於 2010-5-20 15:51
|
只看該作者
[教學]
(教學第37篇) 堆疊 下篇
動態層次疊字
所謂動態層次疊字,就是我們在網頁中建立兩個堆疊層次,當網頁載入時,第一層的堆疊會先出現在網頁中,而第二層的堆疊將會以動態變化的方式出現,同時第二層的堆疊會覆蓋在第一層的堆疊上。
實例學習:
在網頁中出現藍色文字字串的第一層堆疊,當我們將
滑鼠
移至藍色文字的層疊上時,將第一層堆疊的紅色文字字串一個字一個字的疊到第一層堆疊文字上:
下載
(14.46 KB)
2010-5-20 15:48
定義一組用來作為第一層文字字串的網頁文字樣式:在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式類別為Style1的網頁標籤時,就將其被包括在網頁標籤中的字串文字
格式
定為我們所宣告的網頁文字樣式:
.Style1
{
position:absolute;
top:50px;
left:50px;
font-size:24pt;
font-weight: bold;
color: #0000ff;
z-index:1;
}
複製
代碼
這樣一段CSS樣式性質宣告將使我們被加註樣式類別為Style1的網頁標籤的文字字串擁有藍色、粗體、字體大小為24pt的外觀樣式,同時文字字串的位置被安排定位在:瀏覽器視窗從左邊緣算來第50個像素的位置,從上邊緣算來第50個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為1。
接著定義另一組標準的網頁標籤文字樣式:
在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式類別為Style2的網頁標籤時,就將其被包括在網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式。這一組網頁標籤文字樣式在本範例中是作為打字
特效
的文字的樣式宣告:
.Style2
{
position:absolute;
top:52px;
left:52px;
font-size:24pt;
font-weight: bold;
color: #ff0000;
z-index2;
}
複製代碼
這一段CSS樣式性質宣告將使我們被加註樣式類別為Style2的網頁標籤的文字字串擁有紅色、粗體、字體大小為24pt的外觀樣式,雖然文字字串的外觀與Style1所宣告的相同,但是為了產生重疊的效果我們將文字字串的位置定位在:瀏覽器視窗從左邊緣算來第52個像素的位置,從上邊緣算來第52個像素的位置,特別要注意的是:這個層次的’z-index’屬性值為2。
堆疊打字特效程式區段:
<SCRIPT LANGUAGE="javascript">
Speed = 1000 //設定打字速度(文字出現速度)
Count = -1 //設定每次加入一個字
OutText = "" //預設輸出內容是空白
Text = "我就是喜歡你" //動態出現的疊層文字字串內容
function TextAct()
{
Word =Text.length //取得動態堆疊文字字串的長度
if(Count <= Word)
{
Count++
OutText += Text.charAt(Count)
//更新第二層堆疊的內容
document.all.maintext.inner
HTML
= OutText
setTimeout("TextAct()",Speed)
}
}
</SCRIPT>
複製代碼
對於程式內容,大家應該是沒
問題
了!不過提醒你注意一下程式碼第16行,小誌是使用innerHTML屬性來更新網頁標籤元件所包括的內容喔!大家不妨使用其他屬性,試試會有何種情況發生!
樓主熱帖
論壇不讓資歷比較淺的人下載查看附件的用意
EXCEL專屬討論區自即日起限中學生以上會員方
麻辣家族討論區 通用版規
OFFICE 基礎教學數位化
ATX 電源供應器手動啟動(不接主機板啟動)
考慮關閉論壇網站
麻辣家族討論區隱私權政策說明
麻辣家族討論區 誠徵版主
由舊論壇轉進的中學生等級以上會員,請關注!
14-2 資料庫圖片存取
收藏
分享
心安,平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!
小誌
發短消息
加為好友
小誌
(小誌)
當前離線
曾經也是水電工
UID
9
帖子
1195
主題
395
精華
113
積分
1747
金錢
1747
點名
0
作業系統
Vista
軟體版本
Office 2003
閱讀權限
200
性別
男
來自
台灣
在線時間
491 小時
註冊時間
2010-5-1
最後登錄
2025-7-7
暱稱:
小誌
頭銜:
曾經也是水電工
管理員
帖子
1195
主題
395
精華
113
積分
1747
點名
0
作業系統
Vista
軟體版本
Office 2003
閱讀權限
200
性別
男
來自
台灣
註冊時間
2010-5-1
最後登錄
2025-7-7
2
#
發表於 2010-5-20 15:54
|
只看該作者
在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style1",包括在<P>與</P>網頁標籤中的字串文字是我們用來顯示第一層次的文字字串內容。同時,我們必須將<BODY>標籤內容加上onload="TextAct()",當網頁被載入時就會呼叫TextAct()函式產生第二個文字層次的打字效果。
<BODY onload="TextAct()">
<P CLASS="Style1" >我就是喜歡你</P>
複製代碼
接著,使用區塊標籤<DIV>,並在標籤內直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style2",並且給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱ID="maintext",注意:<DIV>與</DIV>中,目前並沒有包括任何內容,<DIV>與</DIV>中包括的內容會在程式執行後動態加入與更新。
<DIV CLASS="Style2" ID="maintext"></DIV>
複製代碼
大公告成,開啟網頁試試看!
下載
(7.53 KB)
2010-5-20 15:53
<HTML>
<HEAD>
<TITLE>動態堆疊文字</TITLE>
<STYLE>
<!--
.Style1{
position:absolute;
top:50px;
left:50px;
font-size:24pt;
font-weight: bold;
color: #0000ff;
z-index:1;
}
.Style2{
position:absolute;
top:52px;
left:52px;
font-size:24pt;
font-weight: bold;
color: #ff0000;
z-index:2;
}
-->
</STYLE>
<SCRIPT LANGUAGE="javascript">
Speed = 1000
Count = -1
OutText = ""
Text = "我就是喜歡你"
function TextAct()
{
Word =Text.length
if(Count <= Word)
{
Count++
OutText += Text.charAt(Count)
document.all.maintext.innerHTML = OutText
setTimeout("TextAct()",Speed)
}
}
</SCRIPT>
</HEAD>
<BODY onload="TextAct()">
<P CLASS="Style1" >我就是喜歡你</P>
<DIV CLASS="Style2" ID="maintext"></DIV>
</BODY>
</HTML>
複製代碼
心安,平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!
TOP
靜思自在 :
真正的愛心,是照顧好自己的這顆心。
返回列表
下一主題
上一主題
PowerPoint
Excelㄧ般區
EXCEL專屬討論區
Excelㄧ般區
Excel程式區
進階應用專區
OFFICE 系列
Word
PowerPoint
Access
Office不分區
程式語言
VB 與 VB.Net
C 與 C#
Java 與 J#
程式設計不分區
資料庫
ORACLE
My SQL
MS SQL
網頁設計
ASP 與 ASP.NET
PHP
PHP+MySQL 入門實作
JavaScript
FLASH / ActionScript
HTM/ HTML/ CSS
網頁設計不分區
電腦與作業系統
電腦各種硬體討論
一般電腦軟體討論
論壇事務
管理公告
投訴反映
新手測試
愛 ‧ 生活
公益佈告欄
生活與感動
[收藏此主題]
[關注此主題的新回復]
[通過 QQ、MSN 分享給朋友]
申請友情鏈接
Facebook粉絲