DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 被忽視的META標簽之特效(頁面過渡效果)
被忽視的META標簽之特效(頁面過渡效果)
編輯:HTML和Xhtml     
在web設計中使用js可以實現很多的頁面特效,然而很多人卻忽視了HTML標簽中META標簽的強大功效,其實meta標簽也可以實現很多漂亮的頁面過渡效果。
META標簽是HTML語言HEAD區的一個輔助性標簽,Meta 標簽放在每個網頁的<head>...</head>
中間,我們大家比較熟悉的如:
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">//說明編輯工具;
<meta name="KEYWORDS" content="...">//說明關鍵詞;
<meta name="DESCRIPTION" content="...">//說明主頁描述;
它提供用戶不可見的信息。meta標簽通常用來為搜索引擎robots定義頁面主題,或者是定義用戶浏覽器上的cookie;它可以用於鑒別作者,設定頁面格式,標注內容提要和關鍵字;還可以設置頁面使其可以
根據你定義的時間間隔刷新自己,以及設置RASC內容等級,等等
本文主要闡述如何使用meta標簽,產生頁面過渡效果.....

用法:
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans是css動態濾鏡的一種,產生漸隱效果。另一種動態濾鏡RevealTrans也可以用於頁面進入與退出效果:
動態濾鏡可以為頁面添加動人的淡入淡出、圖象轉化效果,它可以分為兩種blend(混合)和reveal(顯示),
前者可以使對象漸漸消失或出現,後者提供了24種圖象轉化的效果......
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration:表示濾鏡特效的持續時間(單位:秒)
Transition:濾鏡類型。表示使用哪種特效,取值為0-23。
------------------------------------------------------------------------------
       0 :矩形縮小       1: 矩形擴大     
       2: 圓形縮小       3: 圓形擴大     
       4: 下到上刷新      5: 上到下刷新     
       6: 左到右刷新      7: 右到左刷新     
       8 :豎百葉窗       9 :橫百葉窗        
       10 :錯位橫百葉窗     11: 錯位豎百葉窗     
       12 :點擴散       13: 左右到中間刷新     
       14 :中間到左右刷新    15 :中間到上下      
       16 :上下到中間      17 :右下到左上    
       18 :右上到左下      19 :左上到右下    
       20 :左下到右上     21 :橫條      
       22 :豎條       23 :以上22種隨機選擇一種
------------------------------------------------------------------------------
網頁變換效果只要搭配得當,這些變換效果會給訪客留下非常深刻的印象,即使是那些本來對你的站點沒興趣的訪客。特別是喜歡學習網頁制作的朋友,很可能就把 你的網頁復制下來,以供學習研究之用。其實你不過是加了短短一段代碼而已^_^ 網頁變換效果(Trans)共分四大類:"進入網頁"(Page-Enter)、"離開網頁"(Page-Exit)、"進入站點"(Site- Enter)、"離開站點"(Site-Exit)。每一大類又分為25個小類,先用進入網頁效果來舉例說明:

進入網頁時的效果
1.混合效果 代碼如下: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
2.盒狀收縮效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">
3.盒狀放射效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">
4.圓形收縮效果 代碼如下:<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">
5.圓形放射效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">
6.向上擦除效果 代碼如下:<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
7.向下擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
8.向右擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">
9.向左擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">
10.垂直遮蔽效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">
11.水平遮蔽效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">
12.橫向棋盤式效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
13.縱向棋盤式效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">
14.隨即分解效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">
15.左右向中央縮進效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">
16.中央向左右擴展效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">
17.上下向中央縮進效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">
18.中央向上下擴展效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">
19.從左下抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">
20.從左上抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">
21.從右下抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">
22.從右上抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">
23.隨機水平線條效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
24.隨機垂直線條效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
25.隨機效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

現在讓我們來分析一下這些代碼,首先大家一定能看出這些代碼大多數地方很相似。事實上,雖然分類很多,但每個大類下的25個小類是分別對應相同的,並且用 數字來標識,(除了混合效果 blendTrans(Duration=1.0)),所以不用對沒個大類一一舉例說明,只要把"Page-Enter"換為"Page-Exit"(離 開網頁)、"Site-Enter"(進入站點)、"Site-Exit"(離開站點),就可以達到需要的效果了,同時記憶起來也比較方便。其 中"Duration=1.0"可以設定每個周期的時間為多久,單位是秒(現在設置的是每周期1秒)。 需要注意的是四個大類的效果可以在一個網頁裡同時設置,但每個大類只能設置一種效果。另外如果網頁是幀頁的話,也將無法顯示出效果。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved