回首頁 與我們連絡 網站地圖 加入我的最愛



 





請你先將滑鼠移至下方的藍色文字上按一下滑鼠左鍵看看會發生什麼情況,是不是產生類似打字的效果啊!而且新加入的文字字串是一個字一個字的疊上去的呦!這就是所謂的動態層次疊字:

 


我就是喜歡你


這個效果是如何做出來的呢?這個特效應用了CSS的層次控制(z-index),與位置相關的樣式屬性設定(position、top、left),同時將我們宣告的CSS樣式屬性類別加入網頁標籤中利用,當然,我們還得撰寫一個JavaScript程式才能達到這種效果呦!Step By Stype 的來實做一下:

標準的網頁內容開頭:
<html>
<HEAD>
<title>CSS與JavaScript範例2</title>

加入CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

定義一組用來作為第一層文字字串的網頁文字樣式:在主文中(包括在<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。

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>

加入JavaScript程式語言所撰寫的程式敘述:

<SCRIPT LANGUAGE="javascript">
<!--
//Valor 工作室-麻辣學園 http://www.twbts.com
var Speed = 1000 
//設定要產生打字效果的文字加入時間間隔
var Word 
//用來存放產生打字效果的文字長度變數
var Count = -1 //設定一次加入一個文字
var OutText = ""
var Text = "我就是喜歡你"
//設定要產生打字效果的文字字串內容

//JavaScript 程式主體敘述
function TextAct(){
lay = document.all("maintext")
Word =Text.length

if(Count <= Word)
{
Count++
OutText += Text.charAt(Count)
lay.innerHTML = OutText 
setTimeout("TextAct()",Math.random()*Speed)
}
}
// -->
</SCRIPT>

</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style1",包括在<P>與</P>網頁標籤中的字串文字是我們用來顯示第一層次的文字字串內容同時,我們必須將<BODY>標籤內容加上onload="TextAct()"成為<BODY onload="TextAct()">,為何要修正成為這樣的內容?因為這樣當網頁被載入時就會引發JavaScript程式的TextAct區段的程式敘述而產生第二個文字層次的打字效果。
<BODY onload="TextAct()">
<P
CLASS="Style1" >我就是喜歡你</P>

接著在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性類別(class)設定CLASS="Style2",並且給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱ID="maintext",此ID辨識名稱是提供給JavaScript程式辨識用的。

<DIV CLASS="Style2" ID="maintext"></DIV>

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為