HTML+TIME學習筆記（二）

鶯燕音畫 · 發表于 2008-8-6 19:53

第二課 fficeffice" />

上節我談了圖片按照時間的變化，這節我來談下圖片的運動。

試想下我們要表現這么個效果：讓圖片在網頁的0.0坐標在頁面打開后10秒后顯示，然后移動。大家都應該知道MARQUEE這個標簽屬性是用來設置移動的，但是如果用這個屬性來達到斜角45度的移動，大家認為能辦到嗎？我知道能，也知道怎么編寫，但是相對比較復雜。現在我來談談用TIME技術是如何達到的。

老樣子給大家看移動效果:

點擊看效果

其代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>黃鶯語柳紫燕歸梁</TITLE>
<STYLE type="text/css">

</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG id="image1" src="

<t:animateMotion id="am1" targetElement="image1" from="0,0" to="400,400" begin="image1.begin" dur="5" >

<IMG id="image2" src="http://roger01rao.ik8.com/htmlntime/jiaocheng/06a.jpg" style="position:absolute; left:0; top:200;" class="time"

begin="0" end="am2.end+5">

<t:animateMotion id="am2" targetElement="image2" from="0,200" to="400,400" begin="image2.begin" dur="5" fill="hold"/>

</BODY>
</HTML>

大家可以看到這次效果的產生是因為紅色部分的代碼,至于第一部分我已經介紹過了,這里介紹第二部分的代碼:<t:animateMotion>標記是用來移動圖片表格等要素的,targetElement表示目標單元,用來表示運動作用到哪個對象上,可能這個有點面向對象的概念吧,大家可以搜下這方面的資料,這里我就不展開了，from="0,0" to="400,400"表示圖片從0.0坐標移動到400.400坐標上.接著講dur="3",表示運動的速度,fill="hold"表示是否固定位置,大家可以看演示例子的效果,可以看到一個固定在最后位置一個返回了起先位置,就是是否設置了fill="hold" 而產生的效果。