天天看點

網頁轉換時的過渡效果

當我們點選網頁上的連結時,浏覽器頁面就會轉到連結指向的新的頁面,我們想在頁面轉換時加上過渡效果。

打開這個頁面的原代碼,在<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"則是指頁面進入時産生的效果