分享

HTML+TIME 动态滤镜资料

 古越客 2011-09-15
基本代码(不涉及脚本)

<?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /?>

<t:SEQ repeatCount = "indefinite">

<t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 640px; height:425px; POSITION: absolute; TOP: 0px" src = "图片地址" dur = "6" fill = "transition" timeContainer = "par">
<t:TRANSITIONFILTER from = "0" to = "1" type = "progid:DXImageTransform.Microsoft.Wheel(spokes=8)" dur = "2"></t:TRANSITIONFILTER></t:MEDIA>

············

<t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 640px; height:425px; POSITION: absolute; TOP: 0px" src = "图片地址" dur = "6" fill = "transition" timeContainer = "par">
<t:TRANSITIONFILTER from = "0" to = "1" type = "progid:DXImageTransform.Microsoft.Spiral(duration=3, GridSizeX=25, GridSizeY=25)" dur = "2"></t:TRANSITIONFILTER></t:MEDIA>

</t:SEQ>


  第一行是必须要写的代码,它的大意是:声明一个时间(超文本扩展代码)空间、应用time2版本。第二行及最后一行是反复循环的代码,它的大意是:时间容器SEQ,演示次数不确定(也就是循环演示)。两个尖括号之间放置演示的图片的相关代码。
        中间两段,每段是一个图片及相关代码。增加图片,可复制一段,更换图片链接和“type”后面的滤镜代码即可。
        中间两段是两个双标签代码,<t:MEDIA>和<t:TRANSITIONFILTER>,用来布置一张图片的幻灯效果。从整体上看,一张图片是不能演示的,起码要两张以上。因为它的演示效果是反映图片的幻灯的转场效果。下面给出代码的含义。
  <t:MEDIA>__象的类为MEDIA
  样式(style)设置的内容有:
  空间定位为绝对(POSITION: absolute;);
  距顶边(top)为零;
  距左边(left)为零;
  长、宽值( height:425px; WIDTH: 640px;);
  对象链接(src);
  图片显示延续的时间(dur)秒数,可设置;
  填充(fill)应用滤镜变化(transition);
  时间容器(timeContainer)为(per)。

  <t:TRANSITIONFILTER>__滤镜变化;
  它的过程从(from)零到(to)1,也就是完整显示;如果从0到0.5,那么显示一半就会结束转场效果;
  滤镜的类型(type),下面有具体详解;
  滤镜变化占用的时间长度(dur),可调整,但此值必须小于图片显示的延续时间。如果两个时间值相等,在效果上就只能看到转场效果了。    



  1、滤镜代码说明:
type = "progid:DXImageTransform.Microsoft.Wheel(spokes=8)"
  这一行代码,白色部分不必动,更换黄色部分即可。括号前面是滤镜名,括号内是相关参数。如果有多个参数,用逗号分隔。

  2、滤镜及参数:(等号前是参数名,等号后,方括号内是可选、可调的参数项)
一、棋盘格--CheckerBoard(duration=2, direction='left',SquaresX='10',SquaresX='16')
       direction=['up','down','left','right']  SquaresX=['12']  SquaresY=['12']

二、轮辐状--Wheel(spokes=8)  spokes=8为分块的数量

三、溶解--RandomDissolve(sProperties)  无参数

四、螺旋状--Spiral(duration=3, GridSizeX=25, GridSizeY=25)

五、模糊边界过度--gradientWipe(duration=3, WipeStyle='0',gradientsize='0.1')  
          WipeStyle=['0','1']  gradientSize=['小于1的数']

六、淡化效果--fade(overlap='0.8')  无参数

七、幻灯样式--Slide(slideStyle='push',Bands='10')  
        slideStyle=['swap','hide','push']  Bands=['10']

八、平面几何体--Iris(irisStyle = 'CROSS', motion = 'in')  
         irisStyle =['DIAMOND','CIRCLE','CROSS','PLUS','SQUARE','STAR']  motion=['in','out']

九、拉幕效果--barn(duration=5 orientation='vertical', motion ='in')  
        orientation=['horizontal','vertical']

十、扇形效果--RadialWipe(duration=2, wipeStyle='RADIAL')  
        wipeStyle = ['clock','WEDGE','RADIAL']

十一、乱细线--RandomBars(duration=5, orientation='horizontal')  
        orientation=['horizontal','vertical']

十二、拉伸效果--Stretch(duration=3, StretchStyle ='spin')  
         StretchStyle = ['HIDE','PUSH','SPIN']

十三、方框边角插入--Inset(sProperties)  无参数

十四、斜锯齿线拉幕--Strips(duration=5, motion='leftup')  
           motion = ['leftup','leftdown','rightup','rightdown']

十五、阶梯边拉幕效果--Zigzag(duration=6, GridSizeX=25, GridSizeY=25)  

十六、象素块渐变--Pixelate(maxSquare ='50')  

十七、栅栏拉幕效果--Blinds(Direction='left',Bands='10')  
           Direction=['up','down','left','right']  Bands=['10']
 

 

  Html+Time 动态滤镜应用示例

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约