代码入门教程（13）

第二章标签应用

第十一节移动图片（3）

本节继续学习图片的移动。下面讲解图片的五种移动代码。这五种移动图片代码，都可以制作成小模块使用。要深刻领会代码中的内容，学会应用这些移动图片代码。

一、相背而行的图片代码：

代码1：（上下相背）

</marquee>

</marquee>

代码解析：

1、“上下相背而行”的图片代码，由“向上”和“向下”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。

2、各个移动标签中小图片的总宽度，一般不能超过670px,如果超过了670px，小图片就不在同一行显示了。

3、去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变大了。）

代码2：（左右相背）

</marquee>

</marquee>

代码解析：

1、“左右相背而行”的图片代码，由“向左”和“向右”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。

2、“左右相背而行”的图片代码，必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度，一般不能超过335px,如果超过了335px，小图片就不在同一行显示了。

3、“左右相背而行”的图片代码，两个移动标签的位置不可调换。

4、去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。）

二、相对而行的图片代码：

代码1：（上下相对而行）

</marquee>

</marquee>

代码解析：

（1）“上下相对而行的图片代码”由“向下”和“向上”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。

(2)各个移动标签中小图片的总宽度，一般不能超过670px,如果超过了670px，小图片就不在同一行显示了。 ( 3)去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变大了。）

代码2：（左右相对而行）

</marquee>

</marquee>

代码解析： (1)“左右相对而行”的图片代码，由“向右”和“向左”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。

(2)“左右相对而行”的图片代码，必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度，一般不能超过335px,如果超过了335px，小图片就不在同一行显示了。

(3) “左右相对而行”的图片代码，两个移动标签的位置不可调换。

(4)去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。）

三、左右摇摆的图片代码：

代码解析：

（1）左右摇摆的图片，相邻的两个图片，一个要用移动标签控制，另一个不用移动标签控制。

（2）左右摇摆的图片，图片规格不宜太大，一般以100px左右为宜。

（3）移动标签中要设置移动屏幕的宽度与高度，要设置来回走的移动方式。

作业：

（1）认真阅读代码解析，理解上面讲解的各种移动图片代码设置要点。

（2）用上面讲解的五种移动图片代码，各制作一篇文章并观察其效果。

２０1２年 1 1月 2 日于北京

第二章标签应用

第十二节移动图片（4）

本节继续学习图片的移动。下面讲解图片的四种移动代码，这四种移动代码一般都是使用一个图片，不使用多个图片。

1、从左下到右上移动的图片代码：

代码解析：

（1）从“左下到右上”移动的图片代码，由移动方向“向上”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。

（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。

（3）图片的规格，不宜过大，以100px至250px为宜。

（4）图片标签代码注释：<图片标签 css样式＝“滤镜：设置透明度（透明度＝100，样式＝2）”>。透明度默认的范围是从0 到 100，他们其实是百分比的形式，1到0之间的任何值都表示该元素的透明程度。也就是说，0代表完全透明，100代表完全不透明。

2、从右下到左上移动的图片代码：

代码解析：

（1）从“右下到左上”的移动图片代码，由移动方向“向上”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。

（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。

（3）图片的规格，不宜过大，以100px至250px为宜。

3、从左上到右下移动的图片代码：

代码解析：

（1）从“左上到右下”的移动图片代码，由移动方向“向下”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。

（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。

（3）图片的规格，不宜过大，以100px至250px为宜。

4、从右上到左下移动的图片代码：

代码解析：（1）从“右上到左下”的移动图片代码，由移动方向“向下”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。

（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。

（3）图片的规格，不宜过大，以100px至250px为宜。

作业：

1、认真阅读代码分析，掌握代码设置要点。

2、上面讲解的图片的四种移动代码，都是用两个移动标签控制一个图片。代码中图片规格与移动屏幕规格的设置非常重要，如果设置不好，就会出现“图片的某个部分”在移动屏幕中移动的现象。试着改变一下图片规格与移动屏幕规格，看看显示效果，揣摩其中的奥秘。

3、用上面的四种移动标签，各自发表一篇文章。可以替换图片地址，可以修改移动速度，修改移动屏幕的高度与宽度。图片的宽度与高度，最好与第二个移动标签屏幕的宽度和高度相同；一定要小于第一个移动标签的宽度和高度。

２０１２年 1 1月2 日于北京

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