zoukankan      html  css  js  c++  java
  • 让网页在IE下淡入淡出 共17种效果

    加在<head></head>里,右边的数字是淡入淡出花费的时间

    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的

  • 相关阅读:
    让原生select只读,即是有disabled的的感觉,但是却不实现disabled的功能
    log4j配置 简单jsp中调用查看报表配置 解析excel、txt为bean对象配置
    css背景渐变
    myeclipse始终build workspace
    spring实现重定向
    Mysql错误---
    POJ 1087 A Plug for UNIX 【最大流】
    POJ 3281 Dining 【最大流】【神建模】
    POJ 2135 Farm Tour 【模板】【最小费用最大流】
    LibreOJ 116 有源汇有上下界最大流 【模板】【上下界最大流】
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1853115.html
Copyright © 2011-2022 走看看