一步一步学代码---图片加工(图片的动画效果)[连载11] (-

没起名 2007-9-18 1250


二 图片加工
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>
练习:自己选择一个图片,使图片动起来。
熟能生巧,要多加练习哦!
最新回复 (0)
    • 文学风原创文学网站 | 分享原创乐趣
      2
        立即登录 立即注册
返回