|
第二课 ffice ffice" />
上节我谈了图片按照时间的变化，这节我来谈下图片的运动。
试想下我们要表现这么个效果：让图片在网页的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">
<!--
.time{ behavior:url(#default#time2); }
-->
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<IMG id="image1" src="http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg" style="position:absolute; left:0; top:0;" class="time" begin="0" end="am1.end+5">
<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" 而产生的效果。 | 
窥视卡
雷达卡
鲜花(
鸡蛋(
发表于 2008-8-6 19:53
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
发表于 2008-8-6 19:58
楼主
