让网页在IE下淡入淡出 共17种效果
时间：2010-10-16 来源：｛{°莪乖乖
IE网页过渡效果
原文地址： http://www.jansfreeware.com/articles/ie-page-transitions.html
在IE5.5及以上版本的浏览器中，我们可以设置整页过渡效果，据此，我们甚至可以用IE来代替PPT了。
启用网页过渡
默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中： Advanced（高级） - Browsing（浏览） - Enable page transitions（启用页面过渡）即可。
应用过渡效果
当我们需要添加过渡效果时，只需在<head>中添加一个特殊的<meta>即可，比如：
网页进入过渡： <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">网页离开过渡： <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">
接下来我们来罗列各种效果：
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)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: duration, irisStyle (default="PLUS"), motion
Pixelate（震动出来cool）
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">
Properties: 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)">
Properties: 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)">
Properties: duration, orientation (default="horizontal")
RandomDissolve（像素遮罩cool）
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">
Properties: 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)">
Properties: bands (default=1), duration, slideStyle (default="SLIDE")
Spiral（向心旋转cool）
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)"><meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: 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)">
Properties: duration, gridSizeX, gridSizeY
注意：上述所有效果都只支持IE的
相关阅读 更多 +
