(轉自:http://www.cnblogs.com/sukiwqy/archive/2009/12/05/1617771.html)
大家經常在網站上看到一些很不錯的特效,其實馬上想到的就是 Javascript 或是 Flash ...沒錯...但通過寫 Javascript 來獲得特效并非易事,設計 Flash 何嘗也不是這樣...其實大家要好好利用下 HTML 本身有的頁面效果...接下來就來看看吧..(~ o ~)~zZ
怎么做呢,其實很簡單,就利用文本頭的 標記中,具體 meta 標記作用這里就不介紹,這里重點說明它如何實現(xiàn)頁面過渡效果...
IE要求:
在IE5.5及以上版本的瀏覽器中.
啟用網頁過渡效果
默認情況下都已經啟用了,如果需要手動啟用則只需在Internet選項中: Advanced(高級) - Browsing(瀏覽) - Enable page transitions(啟用頁面過渡)即可体谒。
應用過渡效果
當我們需要添加過渡效果時全跨,只需在中添加一個特殊的即可痛垛,比如:
一.先介紹下參數(shù):
http-equiv作用很多,這里的值為 Page-Enter 是指在頁面進入的時候發(fā)生,其他值還有:
Page-Enter : 進入頁面
Page-Exit? : 離開頁面
Site-Enter : 進入網站
Site-Exit? : 離開網站
content當然就是內容咯,這里表示頁面過渡的效果設置,這里的兩個屬性表示分別表示
Duration? : 過渡速度
Transition : 可選項。整數(shù)值(Integer)中燥。設置或檢索轉換所使用的方式
具體數(shù)值介紹:
0 : 矩形收縮轉換。
1 : 矩形擴張轉換。
2 : 圓形收縮轉換首尼。
3 : 圓形擴張轉換。
4 : 向上擦除言秸。
5 : 向下擦除软能。
6 : 向右擦除。
7 : 向左擦除举畸。
8 : 縱向百葉窗轉換查排。
9 : 橫向百葉窗轉換。
10 : 國際象棋棋盤橫向轉換抄沮。
11 : 國際象棋棋盤縱向轉換跋核。
12 : 隨機雜點干擾轉換。
13 : 左右關門效果轉換叛买。
14 : 左右開門效果轉換砂代。
15 : 上下關門效果轉換。
16 : 上下開門效果轉換率挣。
17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換刻伊。
18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。
19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。
20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換娃圆。
21 : 隨機橫線條轉換玫锋。
22 : 隨機豎線條轉換。
23 : 隨機使用上面可能的值轉換讼呢。
二.下面介紹具體的例子啦:
混合 (淡入淡出)
盒狀收縮
盒狀展開
圓形收縮
圓形放射
向上擦除
向下擦除
向右擦除
向左擦除
垂直遮蔽
水平遮蔽
橫向棋盤式
縱向棋盤式
隨機溶解
左右向中央縮進
中央向左右擴展
上下向中央縮進
中央向上下擴展
從左下抽出
從左上抽出
從右下抽出
從右上抽出
隨機水平線條
隨機垂直線條
隨機
三.其他過渡效果:
Blinds(百葉窗)
屬性: bands (default=10), Direction (default="down"), Duration ( no default)
Barn(掃除)
屬性: duration, motion, orientation (default="vertical")
CheckerBoard(無數(shù)小格)
屬性: Direction (default="right"), squaresX (default=12), squaresY (default=10)
Fade(淡入淡出)
屬性: duration, overlap (default=1.0)
GradientWipe(漸變掃除)
屬性: duration, gradientSize (default=0.25), motion
Inset(從一角擴散)
屬性: duration
Iris(十字擴散)
屬性: duration, irisStyle (default="PLUS"), motion
Pixelate(震動出來)
屬性: duration, maxSquare (default=25)
RadialWipe(螺旋擴展)
屬性: duration, wipeStyle (default="CLOCK")
RandomBars(線條遮罩)
屬性: duration, orientation (default="horizontal")
RandomDissolve(像素遮罩)
屬性: duration
Slide(拉幕)
屬性: bands (default=1), duration, slideStyle (default="SLIDE")
Spiral(向心旋轉)
屬性: duration, gridSizeX (default=16), gridSizeY (default=16)
Stretch(兩邊開幕效果)
屬性: duration, stretchStyle (default="SPIN")
Strips(一角鋸齒開幕)
屬性: duration, motion
Wheel(十字旋轉開幕)
屬性: duration, spokes (default=4)
ZigZag(Z字形展開)
屬性: duration, gridSizeX, gridSizeY