** CSS 混合 JAVA *))
初階教學 **^~
css 與JavaScript *
**一般來說，我們
都只是運用CSS來
設定網頁文字的大小、
樣式、字型與顏色，
但是現在最流行的是所謂的：動態網頁
(Dynamic HTML)，動態網頁解決了所有對網頁
文件的存取限制，也就說我們可以在HTML網頁
中加入動態的效果，動態的HTML可以使HTML
元件(圖片、文字字串等等)游移於網頁之中，
或是產生與瀏覽者有互動性的增強功能，
當然，單靠CSS是做不到這種互動性功能的，
但是卻可以結合程式語言來達到動態的效果。
(最常用來結合CSS創造出動態HTML戶動性效果的程式語言應該就是JavaScript了， 本單元範例就將示範以CSS樣式表配合JavaScript程式語言來實作出具有 )
互動模式的動態HTML網頁。*
*Dynamic HTML*
文字字串的提示文字方塊：提示文字方塊？這是什麼東東啊？！
千萬別說你不知道喔，這項功能你可
是常常在使用哦！比如說：電腦桌面的
上面，當你將滑鼠指標移至上面的圖示時，
停住滑鼠不動，此時不就會出現一個提示
方塊嗎？對啦！我們就是要在網頁上利用
CSS樣式表及JavaScript來表現出這種效果 !!
*
* *動態層次疊字：在網頁中我們可以利用CSS的樣式宣告來
建立不同的文字層次，並且將不同層次的
文字字串重疊在起！如果文字字串的內容
相同而且位置相當接近則可造成立體的
效果，不僅如此我們若加上JavaScript程式
還可以創造出逐字重疊顯示的效果。
 |
 |
 |
 |
動態網頁(Dynamic HTML)，顧名思義，
 |
複習一下前
幾個CSS的學習單元的介紹，同時將本單元的新CSS性質屬性加入利用，
當然，我們還得撰寫一個JavaScript程式才能達到這種效果呦！
Step By Stype 的來實做一下：
標準的網頁內容開頭：<html>
<HEAD>
<title>CSS與JavaScript範例１</title>
加入CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
定義一組用來作為提示方塊說明的網頁文字樣式：在主文中(包括
在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<div>，並且
在<div>標籤中加註樣式類別為tiptext的網頁標籤時，就將其被包括
在<div>與</div>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式：
div.tiptext
{
position:absolute;
visibility:hidden;
border-style:solid;
border-width:3;
border-color:Green;
background-color:Yellow;
}
div.tiptext
{
position:absolute;
visibility:hidden;
border-style:solid;
border-width:3;
border-color:Green;
background-color:Yellow;
}
這裡有幾個CSS的樣式屬性你或許不是很熟悉，下表是簡單的說明：
| border-style | 邊框樣式:用來設定包圍元件的四個邊框的樣式。 |
| border-width | 邊框寬度:用來設定包圍元件的外框線寬度。 |
| border-color | 邊框顏色:用來設定包圍元件的外框線顏色。 |
| background-color | 背景顏色:用來設定元件的背景底色，此範例中為設定說明方塊文字的背景底色。 |
這樣一段CSS樣式性質宣告將使我們的提示
文字方塊擁有綠色、３pt的外框線、黃色的
背景底色，同時文字提示方塊將是暫時被
隱藏起來的。
接著定義一組標準的網頁標籤文字樣式：這一組標準的網頁標籤文字樣式意義為：在主文中(包括在<BODY>與</BODY>標籤之中
的網頁內容)凡是遇到網頁標籤為<P>，並且在<P>標籤中加註樣式類別為text的
網頁標籤時，就將其被包括在<P>與</P>網頁標籤中的字串文字格式定為’斜體’，
外觀顏色定為’紅色’：
p.text
{
font-style:italic;
color:Red;}
p.text
{
font-style:italic;
color:Red;}
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
加入JavaScript程式語言所撰寫的程式敘述：
<script language="JavaScript">
<!-- //網上觸 ~http://www.MelodyRO.blogger.com var Tiptext//顯現說明文字方塊的程式區段 function show(classname) { if(document.all) {Tiptext=document.all(classname).style} else {Tiptext=document.layers[classname]} Tiptext.visibility='inherit' //將隱藏的文字提示方塊顯現出來 }//隱藏說明文字方塊的程式區段 function hide(classname) { if(document.all) {Tiptext=document.all(classname).style} else {Tiptext=document.layers[classname]} Tiptext.visibility='hidden' //將已經顯現的文字提示方塊隱藏起來 } // --> </script>
</HEAD>
|
開始主文(<BODY>標籤)並在網頁標籤<div>中直接加入我們所宣告
的CSS屬性類別(class)設定，並且給被包括在<div>與</div>網頁標籤中的字串文字
一個特有的辨別名稱(id="tips")。
<BODY><div class="tiptext" id="tips">這是說明的方塊</div>
<BODY><div class="tiptext" id="tips">這是說明的方塊</div>
接著在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別(class)設定!
同時利用滑鼠移入被包括在<P>與</P>網頁標籤中的字串文字時所引發的
滑鼠 onMouseOver事件觸發JavaScript程式的show副程式敘述~及滑鼠移出被包括在<P>與
</P>網頁標籤中的字串文字時所引發的滑鼠 onMouseOut事件觸發JavaScript程式
的hind副程式敘述!
<P class="text" onMouseOver="show('tips');"
onMouseOut="hide('tips');" >會產生提示的字串</P>
結束主文(</BODY>)與網頁主體(</html>)標籤。</BODY>
</html>*
*請你先將滑鼠移至下方的藍色文字上按一下滑鼠左鍵看看會發生什麼情況，
是不是產生類似打字的效果啊！而且新加入的文字字串是一個字一個字的疊上去的呦!!
這就是所謂的動態層次疊字：*
*
這個效果是如何做出來的呢？這個特效應用了CSS的層次 控制(z-index),與位置相關
的樣式屬性設定(position、top、left)，同時將我們宣告的CSS樣式
屬性類別加入網頁標籤中利用，當然，我們還得撰寫一個JavaScript程式
才能達到這種效果呦！Step By Stype 的來實做一下：
標準的網頁內容開頭：<html>
<HEAD>
<title>CSS與JavaScript範例２</title>
加入CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
定義一組用來作為第一層文字字串的網頁文字樣式：在主文中
(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式類別
為Style1的網頁標籤時，就將其被包括在網頁標籤中的字串文字格式定為
我們所宣告的網頁文字樣式：
.Style1
{
position:absolute;
top:50px;
left:50px;
font-size:24pt;
font-weight: bold;
color: #0000ff;
z-index:1;
}
.Style1
{
position:absolute;
top:50px;
left:50px;
font-size:24pt;
font-weight: bold;
color: #0000ff;
z-index:1;
}
這樣一段CSS樣式性質宣告將使我們被
加註樣式類別為Style1的網頁標籤的文字字串擁有
藍色、粗體、字體大小為24pt的外觀樣式，
同時文字字串的位置被安排定位在：
瀏覽器視窗從左邊緣算來第５０個像素的位置，從上邊緣算來第５０個像素的位置，
特別要注意的是：這個層次的’z-index’屬性值為１。!!
接著定義另一組標準的網頁標籤文字樣式：在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是在標籤中加註樣式
類別為Style2的網頁標籤時，就將其被包括在網頁標籤中的字串文字格式定為
我們所宣告的網頁文字樣式。這一組網頁標籤文字樣式在本範例中是作為打字
特效的文字的樣式宣告：
.Style2
{
position:absolute;
top:52px;
left:52px;
font-size:24pt;
font-weight: bold;
color: #ff0000;
z-index2;
}
.Style2
{
position:absolute;
top:52px;
left:52px;
font-size:24pt;
font-weight: bold;
color: #ff0000;
z-index2;
}
這一段CSS樣式性質宣告將使我們被
加註樣式類別為Style2的網頁標籤的文字字串擁有
紅色、粗體、字體大小為24pt的外觀樣式，
雖然文字字串的外觀與Style1所宣告的相同，
但是為了產生重疊的效果我們將文字字串的
位置定位在：瀏覽器視窗從左邊緣算來第５２個像素的位置，
從上邊緣算來第５２個像素的位置，特別要注意的是：這個層次的’z-index’屬性值為２ !
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
加入JavaScript程式語言所撰寫的程式敘述：
<SCRIPT LANGUAGE="javascript">
<!-- //http://www.MelodyRO.blogger.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>
<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>*
****
&什麼叫：動態漸層文字層次堆疊？
在你進入本網頁的時候是否注意到下方的
文字字串變化呢？這就是
動態漸層文字層次堆疊，沒看清楚嗎?
*
這就是
Dynamic HTML
動態漸層文字層次堆疊！
*這個效果必須先在CSS樣式表中先決定三個層次的文字字串位置及其基本樣式，
但是我們並不設定文字字串的外觀顏色，那要在哪裡設呢？我們把文字字串的外觀
顏色保留到JavaScript程式中設定，由JavaScript程式動態設定各層次文字字串的
外觀顏色，同時利用JavaScript程式來控制各個層次文字的出現與否！
標準的網頁內容開頭：<html>
<HEAD>
<title>CSS與JavaScript範例１</title>
加入CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
定義三組用來作為漸成文字堆疊層次的網頁文字樣式：在主文中
(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<div>，並且
在<div>標籤中加註樣式類別時，就將其被包括在<div>與</div>網頁標籤中的字串
文字格式定為我們所宣告的網頁文字樣式：
.Style1 {Left: 20px; Top: 20px; Font-Size:18pt; Font-Weight: bold;
Position: absolute; Z-index:1;}
.Style2 {Left: 40px; Top: 30px; Font-Size:24pt;Position: absolute;Z-index:2;}
.Style3 {Left: 60px; Top: 50px; Font-Size:16pt; Font-Weight: bold;
.Style2 {Left: 40px; Top: 30px; Font-Size:24pt;Position: absolute;Z-index:2;}
.Style3 {Left: 60px; Top: 50px; Font-Size:16pt; Font-Weight: bold;
Position: absolute;Z-index:3;}
加註樣式類別為Style1的CSS樣式性質宣告將
使網頁標籤的文字字串擁有粗體、字體大小為
18pt的外觀樣式，同時文字字串的位置被
安排定位在：瀏覽器視窗從左邊緣算來第２０個像素的位置，
從上邊緣算來第２０個像素的位置，特別要注意的是：這個層次的’z-index’屬性值為１。
加註樣式類別為Style２的CSS樣式性質宣告將
使網頁標籤的文字字串擁有字體大小為24pt的
外觀樣式，同時文字字串的位置被安排定
位在：瀏覽器視窗從左邊緣算來第４０個像素的位置，從上邊緣算來第３０個
像素的位置，這個層次的’z-index’屬性值為２。
加註樣式類別為Style3的CSS樣式性質宣告將
使網頁標籤的文字字串擁有粗體、字體大小為
16pt的外觀樣式，同時文字字串的位置被
安排定位在：瀏覽器視窗從左邊緣算來第６０個像素的位置，
從上邊緣算來第５０個像素的位置，這個層次的’z-index’屬性值為３。
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
加入JavaScript程式語言所撰寫的程式敘述：
<SCRIPT LANGUAGE="javascript">
<!-- //http://www.MelodyRO.blogger.com var speed = 100 //文字字串色產變化的速度 var Count = 0 //漸層文字字串的色彩變換次數變數宣告 var LevelCount = 1 //層次變數計次宣告 var LevelText = new Array() //層次陣列宣告 LevelText[1] = "這就是" //第一個層次文字字串內容 LevelText[2] = "Dynamic HTML" //第二個層次文字字串內容 LevelText[3] = "動態漸層文字層次堆疊！" ///第三
個層次文字字串內容
var lay = new Array() //層次文字字串陣列宣告 ColorChange = "fedcba9876543210" //用來製造漸層文字
字串的１６進位色碼字串宣告
var TextColor= new Array() //層次文字字串最終顏色陣列宣告 function ColorText() { for(i = 1; i <= 3; i++) {lay[i] = document.all("level"+i)} //"level"為網頁中
<DIV>標籤內所指定的主id名稱
if(LevelCount <= 3) { if(Count >= ColorChange.length) { LevelCount++ Count = 0 setTimeout("ColorText()",speed) } else { c = ColorChange.charAt(Count) TextColor [1]= "ff"+c+c+c+c //第一個層次的漸層文字字串顏色 TextColor [2]= c+c+"ff"+c+c //第二個層次的漸層文字字串顏色 TextColor [3]= c+c+c+c+"ff" //第三個層次的漸層文字字串顏色 lay[LevelCount].style.color = TextColor[LevelCount]
//動態設定漸層文字字串顏色
lay[LevelCount].innerHTML = LevelText[LevelCount]
//動態輸出漸層文字字串內容
Count++ setTimeout("ColorText()",speed) } } } // --> </SCRIPT>
</HEAD>
|
開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告
的CSS屬性類別(class)設定CLASS="XXXX"，同時，我們必須將<BODY>標籤內
容加上onload="ColorText()"成為<BODY onload="ColorText()">，
為何要修正成為這樣的內容？因為這樣當網頁被載入時就會引發JavaScript程式
的ColorText區段的程式敘述而開始產生有三個漸層變化的文字字串層次效果。
在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後，必須給被包括
在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。請特別注意：
id 的名稱內容必須是連續的編號名稱，同時主名稱必須配合JavaScript
程式來命名！(id="主名稱＋連續數字編號")
<BODY onload="ColorText()">
<DIV id="level1" class="Style1"></DIV>
<DIV id="level2" class="Style2"></DIV>
<DIV id="level3" class="Style3"></DIV>
<BODY onload="ColorText()">
<DIV id="level1" class="Style1"></DIV>
<DIV id="level2" class="Style2"></DIV>
<DIV id="level3" class="Style3"></DIV>
注意：在<DIV>與</DIV>網頁標籤中並不需要加入文字字串，
此處的文字字串內容將由 JavaScript 程式來動態產生！
結束主文(</BODY>)與網頁主體(</html>)標籤。</BODY>
</html>*
*
*
*
*何謂亂數飛行？亂數飛行就是我們不在CSS樣式表中直接指定文字字串的位置，
因為如果在CSS樣式表中設定則文字字串的位置將是固定的！但是，我們可以
使用JavaScript程式來動態的指定文字字串的位置，請你將滑鼠移至下方的紅色
文字上按一下滑鼠左鍵，看看會發生什麼情況，如何？這就是所謂的亂數飛行文字字串：*
*<按偶飛給你看>*
*這個效果必須先在CSS樣式表中先決定
三個層次的文字字串的基本樣式，但是
我們並不設定文字字串的位置，我們把文字
字串的位置保留到JavaScript程式中動態設定，
由JavaScript程式動態設定各層次文字字串的
位置，同時利用JavaScript程式來控制各個
層次文字的出現與否！*
*
標準的網頁內容開頭：<html>
<HEAD>
<title>CSS與JavaScript範例４</title>
加入CSS樣式宣告內容：別忘了加上註解符號。<STYLE>
<!--
定義三組用來作為漸成文字堆疊層次的網頁文字樣式：在主文中
(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<DIV>，
並且在<DIV>標籤中加註樣式類別時，就將其被包括在<DIV>與</DIV>網頁標籤中
的字串文字格式定為我們所宣告的網頁文字樣式：
.Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}
.Style1{COLOR: #0000ff; FONT-SIZE: 16pt; POSITION: absolute;}
.Style2{COLOR: #00ff00; FONT-SIZE: 16pt; POSITION: absolute;}
.Style3{COLOR: #ff0000; FONT-SIZE: 16pt; POSITION: absolute;}
加註樣式類別為Style1的CSS樣式性質宣告
將使網頁標籤的文字字串擁有藍色、字體大小
為１６pt的外觀樣式。
加註樣式類別為Style２的CSS樣式性質宣告
加註樣式類別為Style２的CSS樣式性質宣告
將使網頁標籤的文字字串擁有綠色、字體大小
為１６pt的外觀樣式。
加註樣式類別為Style3的CSS樣式性質宣告將
加註樣式類別為Style3的CSS樣式性質宣告將
使網頁標籤的文字字串擁有紅色、字體大小為
１６pt的外觀樣式。
結束CSS樣式宣告內容：別忘了加上註解符號。-->
</STYLE>
加入JavaScript程式語言所撰寫的程式敘述：
<SCRIPT language="javascript">
<!-- // http://www.MelodyRO.blogger.com* var speed = 5 //亂數變換位置的速度 var Count = 0 var Fcount = 50 //亂數變換位置的次數 var TimeID var IsFly = false var lay //以下為亂數飛行字串初始的位置定位設定 var StarFly = new Array() StarFly[1] = 0 StarFly[2] = 50 StarFly[3] = 0 StarFly[4] = 50 StarFly[5] = 0 StarFly[6] = 50
//以下為亂數飛行字串最後的位置定位設定
var EndFly = new Array() EndFly[1] = 10 //第一層次亂數飛行字串最後的水平軸(Left)位置定位設定 EndFly[2] = 30 //第一層次亂數飛行字串最後的垂直(Topt)位置定位設定 EndFly[3] = 20 //第二層次亂數飛行字串最後的水平軸(Left)位置定位設定 EndFly[4] = 40 //第二層次亂數飛行字串最後的垂直軸(Top)位置定位設定 EndFly[5] = 30 //第三層次亂數飛行字串最後的水平軸(Left)位置定位設定 EndFly[6] = 50 //第三層次亂數飛行字串最後的垂直軸(Top)位置定位設定 function Roundtext(){ for(var i = 1; i <=3; i++) { lay = document.all("fly"+i) //"fly"為網頁中 <DIV>標籤內所指
定的主id名稱
lay.style.visibility = "visible" StarFly[i*2-1] = Math.round(Math.random()*document.body.clientWidth -
lay.style.posWidth)
StarFly[i*2] = Math.round(Math.random()*document.body.clientHeight-
lay.style.posHeight)
} Count++; if(IsFly==false) { IsFly = true; for(var i = 1; i <= 3; i++) {//動態亂數設定文字字串的水平位置(Left) lay.style.posLeft = Math.round(StarFly[i*2-1] + (EndFly[i*2] -
StarFly[i*2-1])/Fcount * Count)//動態亂數設定文字字串的垂直位置(Top)
lay.style.posTop = Math.round(StarFly[i*2] + (EndFly[i*2-1] -
StarFly[i*2])/Fcount * Count)
lay = document.all("fly"+i) if(Count <= Fcount){IsFly = false} } TimerID = setTimeout("Roundtext()",speed) } else{clearTimeout(TimeID)} } // --> </SCRIPT>
</HEAD>
|
開始主文(<BODY>標籤)並在網頁標籤<DIV>中直接加入我們所宣告的CSS屬性
類別(class)設定CLASS="XXXX"，同時，我們必須將<BODY>標籤內容
加上onload="Roundtext()"成為<BODY onload="Roundtext()">，
為何要修正成為這樣的內容？因為這樣當網頁被載入時就會引發JavaScript程式
的Roundtext區段的程式敘述而開始產生有三個層次亂數飛行而後集中定位的文字字串特效。
在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定後，
必須給被包括在<DIV>與</DIV>網頁標籤中的字串文字一個特有的辨別名稱(id)。
請特別注意：id 的名稱內容必須是連續的編號名稱，同時主名稱必須配合JavaScript
程式來命名！(id="主名稱＋連續數字編號")
<BODY onload="Roundtext()">
<DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
<BODY onload="Roundtext()">
<DIV class="Style1" id="fly1">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style2" id="fly2">亂數飛行集中定位的文字字串</DIV>
<DIV class="Style3" id="fly3">亂數飛行集中定位的文字字串</DIV>
注意：在<DIV>與</DIV>網頁標籤中必須加入各層次的文字字串，
此處的文字字串並非由 JavaScript 程式來動態產生！JavaScript 程式
只有動態地來設定各層次文字字串的位置(Position)。
結束主文(</BODY>)與網頁主體(</html>)標籤。</BODY>
</html>*
ha