HTML+TIME学习笔记（二）
<P class=ftstyle1 style="MARGIN: auto 0cm; TEXT-ALIGN: center" align=center><FONT size=3><FONT face=宋体><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">第二课</SPAN></B></FONT></FONT><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><FONT size=3><FONT face=宋体> <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p></FONT></FONT></SPAN></B></P><P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"> </SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">上节我谈了图片按照时间的变化，这节我来谈下图片的运动。</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><o:p></o:p></SPAN></B></FONT></FONT></P>
<P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"> </SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">试想下我们要表现这么个效果：让图片在网页的</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">0.0</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">坐标在页面打开后</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">10</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">秒后显示，然后移动。大家都应该知道</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">MARQUEE</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">这个标签属性是用来设置移动的，但是如果用这个属性来达到斜角</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">45</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">度的移动，大家认为能办到吗？我知道能，也知道怎么编写，但是相对比较复杂。现在我来谈谈用</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">TIME</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">技术是如何达到的。</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><o:p></o:p></SPAN></B></FONT></FONT></P>
<P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"></SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">老样子给大家看移动效果</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">:</SPAN></B></FONT></FONT></P>
<P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus"> <FONT color=blue size=5><A href="http://roger01rao.ik8.com/htmlntime/jiaocheng/教程2.html"><FONT color=blue size=5>点击看效果</FONT></A></FONT></SPAN></B></FONT></FONT></P>
<P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"> </SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">其代码如下：</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><o:p></o:p></SPAN></B></FONT></FONT></P>
<P class=ftstyle1 style="MARGIN: auto 0cm">
<P class=ftstyle1 style="MARGIN: auto 0cm"><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><FONT size=3><FONT face=宋体><o:p></o:p></FONT></FONT></SPAN></B></P><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><FONT size=3><FONT face=宋体 color=#000000><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <BR><HTML XMLNS:t="urn:schemas-microsoft-com:time"><BR><HEAD><BR><META http-equiv="Content-Type" content="text/html; charset=gb2312"><BR><META http-equiv="Content-Style-Type" content="text/css"><BR><TITLE>黄莺语柳紫燕归梁</TITLE><BR><STYLE type="text/css"><BR><!-- <BR>.time{ behavior:url(#default#time2); } <BR>--> <BR></STYLE> <BR><?IMPORT namespace="t" implementation="#default#time2"><BR></HEAD><BR><BODY><BR><IMG id="image1" src="<A href="http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg">http://roger01rao.ik8.com/htmlntime/jiaocheng/05a.jpg</A>" style="position:absolute; left:0; top:0;" class="time" begin="0" end="am1.end+5"></FONT></FONT></SPAN></B></P><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><FONT size=3><FONT face=宋体 color=#000000>
<P class=ftstyle5 style="MARGIN: auto 0cm"><BR><FONT color=red><t:animateMotion id="am1" targetElement="image1" from="0,0" to="400,400" begin="image1.begin" dur="5" ></FONT></P>
<P><FONT color=darkolivegreen><IMG id="image2" src="</FONT><A href="http://roger01rao.ik8.com/htmlntime/jiaocheng/06a.jpg"><FONT color=darkolivegreen>http://roger01rao.ik8.com/htmlntime/jiaocheng/06a.jpg</FONT></A><FONT color=darkolivegreen>" style="position:absolute; left:0; top:200;" class="time" </FONT></P>
<P><FONT color=darkolivegreen>begin="0" end="am2.end+5"></FONT></P>
<P><FONT color=red><BR><t:animateMotion id="am2" targetElement="image2" from="0,200" to="400,400" begin="image2.begin" dur="5" fill="hold"/><BR> <BR></FONT></BODY><BR></HTML><BR></P></FONT></FONT></SPAN></B>
<P class=style1 style="MARGIN: auto 0cm"><B><SPAN lang=EN-US style="FONT-FAMILY: papyrus"><FONT size=3><FONT color=#000000><FONT face=宋体><o:p></o:p></FONT></FONT></FONT></SPAN></B></P>
<P class=ftstyle1 style="MARGIN: auto 0cm"><FONT size=3><FONT face=宋体><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><SPAN style="mso-spacerun: yes"> </SPAN></SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">大家可以看到这次效果的产生是因为红色部分的代码</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">至于第一部分我已经介绍过了</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">这里介绍第二部分的代码</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">:</SPAN></B><SPAN class=style51><B><SPAN lang=EN-US style="FONT-FAMILY: papyrus"><FONT color=#ff0000><t:animateMotion></FONT></SPAN></B></SPAN><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">标记是用来移动图片表格等要素的</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><SPAN class=style51><B><SPAN lang=EN-US style="FONT-FAMILY: papyrus"><FONT color=#ff0000>targetElement</FONT></SPAN></B></SPAN><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">表示目标单元</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">用来表示运动作用到哪个对象上</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">可能这个有点面向对象的概念吧</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">大家可以搜下这方面的资料</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">这里我就不展开了，</SPAN></B><SPAN class=style51><B><SPAN lang=EN-US style="FONT-FAMILY: papyrus"><FONT color=#ff0000>from="0,0" to="400,400"</FONT></SPAN></B></SPAN><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">表示图片从</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">0.0</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">坐标移动到4</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">00.400</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">坐标上</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">.</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">接着讲</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><FONT color=red>dur="3",</FONT></SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">表示运动的速度</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><SPAN class=style51><B><SPAN lang=EN-US style="FONT-FAMILY: papyrus"><FONT color=#ff0000>fill="hold"</FONT></SPAN></B></SPAN><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">表示是否固定位置</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">大家可以看演示例子的效果</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">可以看到一个固定在最后位置一个返回了起先位置</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">,</SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">就是是否设置了</SPAN></B><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus">fill="hold" </SPAN></B><B><SPAN style="COLOR: #4d7880; mso-ascii-font-family: papyrus; mso-hansi-font-family: papyrus">而产生的效果。</SPAN></B></FONT></FONT><B><SPAN lang=EN-US style="COLOR: #4d7880; FONT-FAMILY: papyrus"><o:p></o:p></SPAN></B></P> 学习中。 既然没有人留言提意见，那就不继续了，如果有需要我再写吧。 这几节课放一块就好，那样更方便大家学习！ 继续学习。 再顶,谢谢分享 楼主说的很明白，原来不是很明白的问题也懂了，谢谢。 虽然偶不懂，再来支持下，辛苦！ 学习中谢谢 哈哈 值得吊高了卖 想LZ学习~~
页:
[1]
2