一步一步学代码---图片加工（图片的动画效果）[连载11] (-
一步一步学代码---图片加工（图片的动画效果）[连载11] (-
二 图片加工
4 图片的动画效果
（1）效果代码:<t:TRANSITIONFILTER from="0" to="1" type="fade" dur="2">type="fade":图片变化属性=值值:fade 图片渐显渐隐barWipe 图片从左到右拉开ClockWipe 图片像钟表一样旋转拉开barnDoorWipe 图片从中间向两边拉开slideWipe 图片右往左边拉开irisWipe 图片正中矩形向外扩散snakeWipe 图片蛇形展开ellipseWipe 图片正中小圆向外扩散spiralWipe 图片螺旋显示pushWipe 图片右往左像推箱子一样
（2.定位代码:<DIV s）yle="position:relative; top:0px; left:0px; width:550px; height:413px;overflow: hidden">width:550px; height:413px:定显示的宽和高,（原图片的尺寸是：550×413）top:0px; left:0px;;定该显示离顶和左边的距离。
举例如下：
原图：
代码：
<DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 550px; TOP: 0px; HEIGHT: 413px"><DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><?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: 550px; POSITION: absolute; TOP: 0px" src = "http://img1.qq.com/news/20040606/315742.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "ellipseWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA></t:SEQ></DIV></DIV>
显示效果图：
将ellipseWipe依次换成其它变化属性（代码的其它部分不变！）：fade、barWipe、ClockWipe、barnDoorWipe、slideWipe、irisWipe、snakeWipe、spiralWipe、pushWipe的显示效果图如下：
合在一起：
代码为：
<TABLE border=0><TBODY><TR><TD><DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 550px; TOP: 0px; HEIGHT: 413px"><DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px"><?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" declareNamespace /><t:SEQ repeatCount = "indefinite"><t:MEDIA style="FILTER: alpha; LEFT: 35%; WIDTH: 550px; POSITION: absolute; HEIGHT: 413px" src = "http://img1.qq.com/news/20040606/315742.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "fade" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 35%; WIDTH: 550px; POSITION: absolute; HEIGHT: 413px" src = "http://img1.qq.com/news/20040606/315746.jpg" dur = "3" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "barnDoorWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 550px; POSITION: absolute; TOP: 0px" src = "http://img1.qq.com/news/20040606/315710.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "ellipseWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 550px; POSITION: absolute; TOP: 0px" src = "http://img1.qq.com/news/20040606/315712.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "CLOCKWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 35%; WIDTH: 550px; POSITION: absolute; HEIGHT: 413px" src = "http://img1.qq.com/news/20040606/315713.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "fade" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 35%; WIDTH: 550px; POSITION: absolute; HEIGHT: 413px" src = "http://img1.qq.com/news/20040606/315736.jpg dur = "3" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "barnDoorWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 550px; POSITION: absolute; TOP: 0px" src = "http://img1.qq.com/news/20040606/315742.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "IRISWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA><t:MEDIA style="FILTER: alpha; LEFT: 0px; WIDTH: 550px; POSITION: absolute; TOP: 0px" src = "http://img1.qq.com/news/20040606/315742.jpg" dur = "3" fill = "transition" timeContainer = "par"><t:TRANSITIONFILTER from = "0" to = "1" type = "SNAKEWipe" dur = "2"></t:TRANSITIONFILTER></t:MEDIA></t:SEQ></DIV></DIV></TD></TR></TBODY></TABLE>
练习：自己选择一个图片，使图片动起来。
熟能生巧，要多加练习哦！
