自丟網

 找回密碼
 立即注冊
搜索
打印 上一主題 下一主題

網頁過渡效果(meta http-equiv=Page-Enter)詳細分析使用教程

[復制鏈接]
跳轉到指定樓層
樓主
admin 發表于 2019-7-27 10:20:29 | 查看: 45|回復: 0 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
網頁過渡效果(meta http-equiv=Page-Enter)詳細分析使用教程
利用文本頭的 <meta> 標記中,具體 meta 標記作用這里就不介紹,這里重點說明它如何實現頁面過渡效果...
IE要求:
  在IE5.5及以上版本的瀏覽器中.
啟用網頁過渡效果
  默認情況下都已經啟用了,如果需要手動啟用則只需在Internet選項中: Advanced(高級) - Browsing(瀏覽) - Enable page transitions(啟用頁面過渡)即可。
應用過渡效果

  當我們需要添加過渡效果時,只需在<head>中添加一個特殊的<meta>即可,比如:
     <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" />
一.先介紹下參數:
http-equiv 作用很多,這里的值為 Page-Enter 是指在頁面進入的時候發生,其他值還有:
       Page-Enter : 進入頁面

       Page-Exit  : 離開頁面

       Site-Enter : 進入網站

       Site-Exit  : 離開網站

content 當然就是內容咯,這里表示頁面過渡的效果設置,這里的兩個屬性表示分別表示
       Duration  : 過渡速度
       Transition : 可選項。整數值(Integer)。設置或檢索轉換所使用的方式
具體數值介紹:
       0 : 矩形收縮轉換。
       1 : 矩形擴張轉換。
       2 : 圓形收縮轉換。
       3 : 圓形擴張轉換。
       4 : 向上擦除。
       5 : 向下擦除。
       6 : 向右擦除。
       7 : 向左擦除。
       8 : 縱向百葉窗轉換。
       9 : 橫向百葉窗轉換。
       10 : 國際象棋棋盤橫向轉換。
       11 : 國際象棋棋盤縱向轉換。
       12 : 隨機雜點干擾轉換。
       13 : 左右關門效果轉換。
       14 : 左右開門效果轉換。
       15 : 上下關門效果轉換。
       16 : 上下開門效果轉換。
       17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換。
       18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。
       19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。
       20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換。
       21 : 隨機橫線條轉換。
       22 : 隨機豎線條轉換。
       23 : 隨機使用上面可能的值轉換。

二.下面介紹具體的例子啦:

混合 (淡入淡出)

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

盒狀收縮

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=0)" />

盒狀展開

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=1)" />

圓形收縮

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=2)" />

圓形放射

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=3)" />

向上擦除

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=4)" />

向下擦除

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=5)" />

向右擦除

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=6)" />

向左擦除

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=7)" />

垂直遮蔽

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=8)" />

水平遮蔽

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=9)" />

橫向棋盤式

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=10)" />

縱向棋盤式

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=11)" />

隨機溶解

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" />

左右向中央縮進

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=13)" />

中央向左右擴展

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=14)" />

上下向中央縮進

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=15)" />

中央向上下擴展

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=16)" />

從左下抽出

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=17)" />

從左上抽出

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=18)" />

從右下抽出

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=19)" />

從右上抽出

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=20)" />

隨機水平線條

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=21)" />

隨機垂直線條

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=22)" />

隨機

  <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=23)" />

三.其他過渡效果:

Blinds(百葉窗)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" />

    屬性: bands (default=10), Direction (default="down"), Duration ( no default)

Barn(掃除)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" />

    屬性: duration, motion, orientation (default="vertical")

CheckerBoard(無數小格)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" />

    屬性: Direction (default="right"), squaresX (default=12), squaresY (default=10)

Fade(淡入淡出)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" />

    屬性: duration, overlap (default=1.0)

GradientWipe(漸變掃除)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" />

    屬性: duration, gradientSize (default=0.25), motion

Inset(從一角擴散)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" />

    屬性: duration

Iris(十字擴散)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" />

    屬性: duration, irisStyle (default="PLUS"), motion

Pixelate(震動出來)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" />

    屬性: duration, maxSquare (default=25)

RadialWipe(螺旋擴展)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" />

    屬性: duration, wipeStyle (default="CLOCK")

RandomBars(線條遮罩)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" />

    屬性: duration, orientation (default="horizontal")

RandomDissolve(像素遮罩)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" />

    屬性: duration

Slide(拉幕)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" />

    屬性: bands (default=1), duration, slideStyle (default="SLIDE")

Spiral(向心旋轉)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" />

    屬性: duration, gridSizeX (default=16), gridSizeY (default=16)

Stretch(兩邊開幕效果)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" />

    屬性: duration, stretchStyle (default="SPIN")

Strips(一角鋸齒開幕)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" />

    屬性: duration, motion

Wheel(十字旋轉開幕)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" />

    屬性: duration, spokes (default=4)

ZigZag(Z字形展開)

  <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" />

  <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" />

    屬性: duration, gridSizeX, gridSizeY


推薦給好友: [復制鏈接]
上一篇:織夢Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201的解決方法教程摘要:織夢Fatal error: Call to undefined function make_h ...
下一篇:解決透明logo背景png格式灰色顯示問題方法教程摘要:解決透明logo背景png格式灰色顯示問題方法教程 使用及 ...
樓主熱帖
回復

使用道具 舉報

網站地圖|百度統計|免責聲明|Archiver|手機版|小黑屋|ZiDiu.Com ( 粵ICP備17166275號 )

GMT+8, 2019-8-18 17:31 , Processed in 0.171875 second(s), 33 queries .

Powered by Discuz!

© Comsenz Inc.

快速回復 返回頂部 返回列表
鸟叔彩金