代码学习群简易教程（9）

第

九

节

移

动

标

签

应

用

(1)

上一节讲了移动标签。移动标签可以广泛地应用于文字、图片等内容。本节比较详细地讲解移动标签的应用。

比较简单的移动文字，我在上一节讲解的内容中已经提供了不少代码了，本节就不再赘述了。本节把移动文字与移动图片结合起来讲解。

1、原地跳动的文字：

“原地跳动”的文字代码，是用每一套移动标签控制一套文字标签和“一个”文字内容。移动标签中设置了“向上”的移动方向，“来回走”的移动方式，设置了移动屏幕的“宽度与高度”。文字标签中设置了“文字的行高、字体、颜色与字号”。

代码：

如果“删除”文字标签，把“文字”替换为“图片”，就变为“原地跳动的图片”了。

2、原地跳动的图片：

“原地跳动的图片”，其移动标签的总宽度不能超过660px。

代码：

3、交替跳动的文字：

代码： “交替跳动”的文字代码，是用每一套移动标签控制一套文字标签与“一个”文字内容。移动标签中设置了“向上”的移动方向，“来回走”的移动方式，设置了移动屏幕的“宽度”。相邻的两个移动标签，一个设置了高度，另一个采用系统默认的高度（也就是不设置高度）。文字标签中设置了“文字的字体、颜色与字号”。

如果“删除”文字标签，把“文字”替换为“图片”，就变为“交替跳动的图片”了。

4、交替跳动的图片：“交替跳动的图片”，其移动标签的总宽度也不能超过660px。

代码：

5、相对而行的文字：

“相对而行”的文字，是用“向下”移动的移动标签控制第一行文字；用“向上”移动的移动标签控制第二行文字。

“相对而行”的移动文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0705/09/4127803_222353071.shtml

6、相对而行的图片：

相对而行的图片，是用“向下”移动的移动标签控制第一个图片；用“向上”移动的移动标签控制第二个图片。

代码：

7、相背而行的文字：

“相背而行”的文字，是用“向上”移动的移动标签控制第一行文字；用“向下”移动的移动标签控制第二行文字。

“相背而行”的移动文字效果与代码，请常用我制作的这篇网页：

http://www.360doc.com/content/12/0705/09/4127803_222353071.shtml

8、相背而行的图片：

“相背而行”的图片，是用“向上”移动的移动标签控制第一个图片；用“向下”移动的移动标签控制第二个图片。

代码：

9、向“右上”移动的文字：

向“右上”移动的文字是用“向上”移动与“向右”移动的两个移动标签共同控制文字内容。

向“右上”移动的文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0706/20/4127803_222682812.shtml

10、向“右上”移动的图片：

向“右上”移动的图片效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0327/07/4127803_198141678.shtml

11、向“左上”移动的文字：

向“左上”移动的文字是用“向上”移动与“向左”移动的两个移动标签共同控制文字内容。

向“左上”移动的文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0706/21/4127803_222693684.shtml

12、向“左上”移动的图片：

向“左上”移动的图片效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0327/08/4127803_198156870.shtml

13、向“右下”移动的文字：

向“右下”移动的文字是用“向下”移动与“向右”移动的两个移动标签共同控制文字内容。

向“右下”移动的文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0706/21/4127803_222697651.shtml

14、向“右下”移动的图片：向“右下”移动的图片是用“向下”移动与“向右”移动的两个移动标签共同控制图片内容。

向“右下”移动的图片效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0327/16/4127803_198314088.shtml

15、向“左下”移动的文字：

向“左下”移动的文字是用“向下”移动与“向左”移动的两个移动标签共同控制文字内容。

向“左下”移动的文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0706/21/4127803_222696214.shtml

16、向“左下”移动的图片：

向“左下”移动的图片效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/content/12/0327/16/4127803_198307772.shtml

17、左右摇摆的文字：

在“左右摇摆的文字”中，相邻的两个文字，一个用设置了“来回走移动方式”的移动标签控制，另一个不用移动标签控制。

左右摇摆的文字效果与代码，请参阅我制作的这篇网页：

http://www.360doc.com/showWeb/0/0/222737263.aspx

18、左右摇摆的图片：

代码：

19、并排向上移动的文字：

“并排向上”移动的文字，是用“向上”移动的移动标签控制“几行”文字。移动标签中设置“居中对齐”的对齐方式，为的是效果比较美观。 “移动标签”中的居中“对齐方式”要用css样式：style="text-align: center"设置。

代码：

<MARQUEE style="TEXT-ALIGN: center" direction=up>我们并排向上行 我们并排向上行 我们并排向上行</MARQUEE>

20、并排向上移动的图片：

“并排向上”移动的图片，是用“向上”移动的移动标签控制“几行”图片。移动标签中设置“居中对齐”的对齐方式，效果比较美观。

代码：

“并排向上”移动的文字与“并排向上”移动的图片，可以修改其移动方向，制作成为：“并排向下”移动的文字与“并排向下”移动的图片，“并排向左”移动的文字与“并排向左”移动的图片，“并排向右”移动的文字与“并排向右”移动的图片。

作业：

1、熟练掌握移动标签的表达方式，熟练掌握移动标签的常用属性属值。

2、认识并尽可能地掌握本节讲解的20种常用的“移动文字”与“移动图片”。

3、“练习制作”本节讲解的20种常用的“移动文字”与“移动图片”，并认真观察其显示效果。

4、尝试“修改”或“添加”（也可“删除”）本节讲解的20种常用的“移动文字”与“移动图片”中的属性，制作网页，认真观察其显示效果，总结成功的经验与失败的教训。

5、解析本节讲解的20种常用的“移动文字”与“移动图片”的代码，进一步熟悉标签名称与属性属值，并认真观察各种标签的应用顺序。深刻理解“首标签中的属性属值对其所控制内容的修饰与限制作用”，深刻理解“尾标签的收尾作用（“收尾作用”也可以叫做“闭合作用”）”。

学习知识，是一个积累的过程。它经历两个阶段。即：由薄变厚到由厚变薄。由薄变厚，是量的积累；由厚变薄，是质的飞跃。学习代码也是如此。当你学习每一种标签，每一种属性的时候，你的代码知识就一点一滴地积累起来了，就由薄变厚了。当你掌握了各种标签各种属性的用法，能够运用自如地制作网页的时候，你的代码知识就由厚变薄了。这时候，也许你就会说：欧！学习代码也不过如此啊！并不难学呀！

——“春天没来”

“春天没来”编撰

2014年4月17日于北京

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。