来到新公司
前辈派给我的第一个任务是做一个类似outlook slider的小效果 可以把两个层的变化做成动画。
按照常理说 这个效果需要用flash来做 但是客户要求不能用脚本外的其他东西 幸好是针对ie开发 我想起来ie5.5 beta的新特性
DirectX filters（滤镜 ）了。没错 M$ 5年前就提供了这个现成的效果。IE啊 你这个让人又恨又爱的东西 你不这么强大又怎么会占这么多资源你。。。你该减肥了你。。。
具体可以参看
http://msdn.microsoft.com/en-us/library/ms673540(VS.85).aspx
后面的Transitions 都是动画效果哦
只要有本地msdn的同学 都可以在本地搜索
CSS Visual Filters and Transitions
这个索引
恩 标准例子如下
Code <!-- This element has the filter applied. --> < DIV ID ="oTransContainer" STYLE ="position:absolute; top: 0px; left: 0px; width: 300px; > <!-- This is the first content that is displayed. --> < DIV ID ="oDIV1" STYLE ="position:absolute; top:50px; left:10px; width:240px; height:160px; > This is DIV #1 </ DIV > <!-- This content displays after the first content. --> < DIV ID ="oDIV2" STYLE ="visibility:hidden; position:absolute; top:50px; left:10px; > < BR > This is DIV #2 </ DIV > </ DIV > < BUTTON onclick ="fnToggle()" > Toggle Transition </ BUTTON > < SCRIPT > var bTranState = 0 ; function fnToggle() { 0 ].Apply(); if (bTranState == ' 0 ' ) { = 1 ; = " visible " ; = " hidden " ;} else { = 0 ; = " hidden " ; = " visible " ;} 0 ].Play();} </ SCRIPT >
http://samples.msdn.microsoft.com/workshop/samples/author/filter/Slide.htm 点此直接察看效果
随后问题就来了 前辈要求的页面 并不是这样匀速直线的交换两个桢 而是因受力而加速的样子
这样 Play() 命令肯定是不足以胜任的。 仔细看看参考 我发现了一个不错的切入点
Show:
Attribute
Property
Description
bands bands Sets or retrieves the number of strips into which the content is divided during the
duration Duration Sets or retrieves the length of time the transition takes to complete.
enabled Enabled Sets or retrieves a value that indicates whether the filter is enabled.
Percent Sets or retrieves the point in a transition at which to capture the display for a static filter output.
slideStyle SlideStyle Sets or retrieves the method used to reveal the new content.
status Retrieves the state of the transition.
恩。。。。 Percent
只要定时指派正确的percent 就可以控制速度了
我淫荡的笑了
于是有了下面的代码
Code < html > < body > < script language =Javascript > var startSpeed = 0 // BEGIN SPEED 开始的初始速度 var stepTime = 42 // TIME PER TICK 每tick的的时间 var speeda = 0.1 // acceleration 加速度 var IsMoving = false // lock of "moving" 是否正在移动中 如果在移动中则不处理请求 var NowPercent // now progress percent目前移动的百分比 var NowSpeed // now speed 目前的移动速度 var bTranState = 0 ; // shown layer's index 目前占有显示的层标记 function fnToggle() { if (IsMoving == false ) // lock the action if moving 如果目前并非在移动中 则初始化移动 { // init 初始化目前的状态 NowPercent = 0 = 0 = true // init end 初始化结束 // apply filter, the modify after "Apply()" and "Play() or set Psercent" will make effect to the resualt image // 应用Filter 必须有这具声明 在apply之后 play或set percent之前的所有操作都将记录为结果 oTransContainer.filters[ 0 ].Apply(); if (bTranState == ' 0 ' ) = 1 ; = " visible " ; = " hidden " ; else { = 0 ; = " hidden " ; = " visible " ; " Movestep() " , stepTime); // beging movment 根据预定的tick速度进行移动。 } function Movestep() if (IsMoving) = NowSpeed + speeda // acceleration add to speed 先处理加速度 NowPercent = NowPercent + NowSpeed // count progress 然后计算本tick的百分比 if (NowPercent > 100 ) NowPercent = 100 // overflow control if finish 如果到头了 则防止溢出 0 ].Percent = NowPercent // apply the percentage 把目前百分比应用 if (NowPercent != 100 ) " Movestep() " , stepTime); // next tick call 下一次timer } else = false // release the action lock 释放操作锁定 } function Moveto() </ script > < BUTTON onclick ="fnToggle()" > Toggle Transition </ BUTTON > < DIV ID ="oTransContainer" STYLE ="position:absolute; top: 0px; left: 0px; width: 300px; > <!-- This is the first content that is displayed. --> < DIV ID ="oDIV1" STYLE ="position:absolute; top:50px; left:0px; width:300px; height:160px; >< a href =# > This is DIV #1 </ a > </ DIV > <!-- This content displays after the first content. --> < DIV ID ="oDIV2" STYLE ="visibility:hidden; position:absolute; top:50px; left:0px; > < BR > < a href =# > This is DIV #2 </ a > </ DIV > </ DIV > </ body > </ html >
恩 根据不同条件调整加速度 即可达成想要的各种效果 很有趣
Toggle Transition
这个故事告诉我们
1 IE真臃肿阿，好多东西八百辈子永不到一次
2 IE真强大阿，虽然好多东西八百辈子永不到一次
3 知识不在新旧 用到的时候就是宝贵的知识
4 老知识也可以通过再学习发现新的用途
-0- 真是个啰嗦的大叔阿，写完了 希望对IE CSS感兴趣的弟妹们有帮助
Code
