网页幻灯片过渡效果大全


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(百叶窗)

  Code

<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(扫除)

  Code

<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(无数小格)

  Code

<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(淡入淡出)

  Code

<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(渐变扫除)

  Code

<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(从一角扩散)

  Code

<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(十字扩散)

  Code

<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)

  Code

<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(螺旋扩展)

  Code

<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(线条遮罩)

  Code

<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)

  Code

<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(拉幕)

  Code

<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)

  Code

<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(两边开幕效果)

  Code

<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(一角锯齿开幕)

  Code

<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(十字旋转开幕)

  Code

<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字形展开)

  Code

<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的


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3