2009年11月1日 星期日

HTML再接再厲(十二):換頁特效

注意!這些換頁特效只能在新版微軟探險家(IE 5.0以上)顯示,對於使用火狐狸(Morzilla Firefox)或歌劇(Opera)的網友只能說抱歉。由於換頁特效不是標準的HTML4.0規格,所以一般書籍不會提到,但其設定相當簡單,對個人網站而言,有"清水變雞湯"的效果。

換頁特效也是一種META旗標,如果你對META旗標不熟悉,就先去另篇 META旗標 看看吧!

其語法如下:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">

<meta http-equiv="Page-Exit" content="revealTrans(Transition=20)">

<meta http-equiv="Site-Enter" content="blendTrans(Duration=3.0)">

<meta http-equiv="Site-Exit" content="revealTrans(Transition=23)">

語法分析

meta http-equiv="---" 指定換頁特效所發生的時機:

  • Page-Enter 是進入本頁。
  • Page-Exit 是離開本頁。
  • Site-Enter 是進入本站。
  • Site-Exit 是離開本站。

換頁特效有兩種:

  • blendTrans ("混合",即"淡入淡出")
  • revealTrans ("顯露")

content="blendTrans(Duration=3.0)"
若採用換頁特效為"混合",也就是"淡入淡出"的方式,則以Duration=value 設定特效持續的時間(秒),過短過長都不好,太短看不出來、太長浪費瀏覽時間,建議在3-5秒之間,即 3.0 < value < 5.0。

content="revealTrans(Transition=20)"
若採用換頁特效為"顯露",則可設定24種換頁特效的方式。亦即Transition=value 中的value可以是0-23:

  1. 方塊出現
  2. 方塊消失
  3. 圓形向內
  4. 圓形向外
  5. 向上擦拭
  6. 向下擦拭
  7. 向左擦拭
  8. 向右擦拭
  9. 垂直窗簾
  10. 水平窗簾
  11. 棋盤交錯
  12. 棋盤向下
  13. 隨機分裂
  14. 垂直分割進入
  15. 垂直分割離開
  16. 水平分割進入
  17. 水平分割離開
  18. 向左下方剝落
  19. 向左上方剝落
  20. 向右下方剝落
  21. 向右上方剝落
  22. 水平隨機列
  23. 垂直隨機列
  24. 隨機

註:revealTrans亦可設定特效持續的時間,例如:content="revealTrans(Transition=20 Duration=3.0)",但設定時間若太短,特效可能未完成就被中斷,建議省略。

注意,IE的換頁特效是以網頁的頂部為準,所以執行完成後會自動進行一次目標跳躍,此時視窗會可能會閃爍(跳躍)一次,有點兒刺眼。而且並不是每篇網頁都需要換頁特效或是適合使用換頁特效,也不是四者一定要同時使用,你可以自行決定使用時機。我建議使用在遊記、相簿,或是介紹風景的網頁上。

本文配合微軟探險家(IE 5.0)撰寫,新版IE或有更改或新增特效。

0 留言:

張貼留言