當我們點選網頁上的連結時,浏覽器頁面就會轉到連結指向的新的頁面,我們想在頁面轉換時加上過渡效果。
打開這個頁面的原代碼,在<head>與</head>插入代碼:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
這樣這個過渡效果就完成了,很簡單吧。現在我們來測試一下效果如何,打開這個頁面,然後點選頁面上的連結,頁面在轉到下一個頁面的過程中,我們看到頁面是從上到下慢慢的轉換到第二個頁面的。
我們現在再試一個效果,将那段代碼換成:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)">
我們看到頁面是從中間向左右兩端展開過渡的,而且速度上快了一點。原因在于Duration和Transition的值不同。
Duration的值為網頁動态過渡的時間,機關為秒。
Transition是過渡方式,它的值為0到23,分别對應24種過渡方式。如下表:
0 盒狀收縮 1 盒狀放射
2 圓形收縮 3 圓形放射
4 由下往上 5 由上往下
6 從左至右 7 從右至左
8 垂直百葉窗 9 水準百葉窗
10 水準格狀百葉窗 11垂直格狀百葉窗
12 随意溶解 13從左右兩端向中間展開
14從中間向左右兩端展開 15從上下兩端向中間展開
16從中間向上下兩端展開 17 從右上角向左下角展開
18 從右下角向左上角展開 19 從左上角向右下角展開
20 從左下角向右上角展開 21 水準線狀展開
22 垂直線狀展開 23 随機産生一種過渡方式
當Transition為23時,會随機産生0到22中的一個過渡效果。例如:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)">
除了上面兩個參數,還有一個http-equiv:
http-equiv="Page-Exit"的意思是指頁面離開時産生效果。
它有一種寫法,如:
http-equiv="Page-Enter"則是指頁面進入時産生的效果