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



 





當你進入本單元的各個網頁時相信你會驚訝的發現網頁為何會產生轉化的效果?但是,如果你是使用Netscapt 瀏覽器來觀賞本網頁一定看不到這種特殊的效果!因為目前這種效果只有IE4以上的版本才有解析的能力。

所謂網頁轉換的效果就是類似電影場景的轉換,例如:水平百葉窗轉換、圓形漸小、方塊漸大等效果。以前要做到這種頁面轉換的效果通常是必須透過Java Applet 或是ActiveX Control 等的輔助才能在瀏覽器中顯現出來,但是現在因為瀏覽器的支援解析,只要透過短短的一行網頁敘述就可以達到這種動人的效果!

為了要能順利的使用CSS所提供的頁面轉換效果,首先我們先來看一下HTML標籤語法中相當重要的一個主標籤:

<meta http-equiv="網頁動作" content="動作或時間設定">

上列的這個<META>標籤是必須被包括在<HEAD>與</HEAD>標籤之中的。而<META>標籤中的"網頁動作"設定值在我們的網頁頁面轉換效果中指遇到兩個設定值,就是: Page-Enter 當網頁被載入時Page-Exit 當網頁載出時。

<META>標籤中的"動作或時間設定"設定值在我們的網頁頁面轉換效果中所使用的就是CSS的頁面轉換性質,其標準語法如下:

revealTrans(Duration=<duration>,Transition=<transition shape>)

<duration>表示頁面轉換時所需的毫秒數,<transition shape>則是代表頁面轉換的花樣型式。

頁面轉換的花樣共有24種,我們使用時只要呼叫其花樣型式的代號即可,茲將此24種花樣型式代號說明如下:

代號 花樣 代號 花樣
方塊漸小 12 隨機碎片隱藏
方塊漸大 13 垂直向內撥裂
圓形漸小 14 垂直向外撥裂
圓形漸大 15 水平向內撥裂
由下向上擦拭 16 水平向外撥裂
由上向下擦拭 17 由右上向左下撥裂
由左向右擦拭 18 由右下向左上撥裂
由右向左擦拭 19 由左上向右下撥裂
垂直百葉窗 20 由左下向右上撥裂
水平百葉窗 21 隨機水平條紋擦拭
10 水平棋盤 22 隨機垂直條文擦拭
11 垂直棋盤 23 前23項隨機選取

網頁載入時的轉換特效

現在我們來建立兩個簡易的網頁:A網頁為標準無變化的單純網頁(本範例為 webusecex1.htm),B網頁為具有載入時產生垂直百葉窗轉換效果的網頁(本範例為 webusecex11.htm):

A網頁(本範例為 webusecex1.htm)

B網頁(本範例為 webusecex11.htm)

<html>
<HEAD>
<title>頁面轉換特效範例畫面1</title>
</HEAD>
<body background="images/4-12.gif">
<a class=lin href="webusecex11.htm">頁面轉換特效範例畫面2</A>
</body>
</html>
<html>
<HEAD>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=8)">
<title>頁面轉換特效範例畫面2</title>
</HEAD>
<body background="images/4-13.gif">
<a class=lin href="webusecex1.htm">頁面轉換特效範例畫面1</A>
</body>
</html>

[實例展示]   
當進入實例展示的第一個畫面(A網頁)並不會有任何變化,接著我們點選超鏈結文字連結至B網頁後,你就可以看到B網頁中我們所設定的頁面載入特效啦!


網頁載出時的轉換特效

現在我們換個方式,不要使用載入時產生特效而採用網頁載出時產生特效,現在同樣來建立兩個簡易的網頁:A網頁為具有載出入時產生垂直百葉窗轉換效果的網頁(本範例為 webusecex2.htm),B網頁為標準無變化的單純網頁(本範例為 webusecex22.htm)

A網頁(本範例為 webusecex2.htm)

B網頁(本範例為 webusecex22.htm)

<html>
<HEAD>
<meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=8)">

<title>頁面載出轉換特效範例畫面1</title>
</HEAD>
<body background="images/4-12.gif">
<a class=lin href="webusecex22.htm">頁面轉換特效範例畫面2</A>
</body>
</html>
<html>
<HEAD>

<title>頁面載出轉換特效範例畫面2</title>
</HEAD>
<body background="images/4-13.gif">
<a class=lin href="webusecex2.htm">頁面轉換特效範例畫面1</A>
</body>
</html>

[實例展示]
當進入實例展示的第一個畫面(A網頁)並不會有任何變化,接著我們點選超鏈結文字連結至B網頁後,你就可以看到網頁的轉換特效,是不是與上一個範例的結果相同呢?但是這個效果並非是B頁面載入所產生的而是A頁面載出所產生的特效啦!

 

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

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