第 二 章 标 签 应 用
第十一节 移动图片（3）
本节继续学习图片的移动。下面讲解图片的五种移动代码。这五种移动图片代码，都可以制作成小模块使用。要深刻领会代码中的内容，学会应用这些移动图片代码。
一、相背而行的图片代码：
代码1：（上下相背）
代码解析：
1、“上下相背而行”的图片代码，由“向上”和“向下”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。
2、各个移动标签中小图片的总宽度，一般不能超过670px,如果超过了670px，小图片就不在同一行显示了。
3、去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变大了。）
代码2：（左右相背）
代码解析：
1、“左右相背而行”的图片代码，由“向左”和“向右”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。
2、“左右相背而行”的图片代码，必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度，一般不能超过335px,如果超过了335px，小图片就不在同一行显示了。
3、“左右相背而行”的图片代码，两个移动标签的位置不可调换。
4、去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。）
二、相对而行的图片代码：
代码1：（上下相对而行）
代码解析：
（1）“上下相对而行的图片代码”由“向下”和“向上”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。
(2)各个移动标签中小图片的总宽度，一般不能超过670px,如果超过了670px，小图片就不在同一行显示了。
( 3)去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变大了。）
代码2：（左右相对而行）
代码解析：
(1)“左右相对而行”的图片代码，由“向右”和“向左”移动的两个移动标签分别控制六个小图片，移动标签中都设置了移动屏幕的高度和宽度。
(2)“左右相对而行”的图片代码，必须设置移动屏幕的高度和宽度。各个移动标签中小图片的总宽度，一般不能超过335px,如果超过了335px，小图片就不在同一行显示了。
(3) “左右相对而行”的图片代码，两个移动标签的位置不可调换。
(4)去掉上面移动标签中的“移动屏幕高度和宽度”，看看又是什么效果？想想为什么？（答案：移动屏幕的高度和宽度，是系统默认的高度和宽度了。宽度没有多大的变化，高度变为200px了。向左移动的小图片和向右移动的小图片分为两行显示了。）
三、左右摇摆的图片代码：
<marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90">
<marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
<img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90">
<marquee height="90" behavior="alternate" width="170"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>
代码解析：
（1）左右摇摆的图片，相邻的两个图片，一个要用移动标签控制，另一个不用移动标签控制。
（2）左右摇摆的图片，图片规格不宜太大，一般以100px左右为宜。
（3）移动标签中要设置移动屏幕的宽度与高度，要设置来回走的移动方式。
作业：
（1）认真阅读代码解析，理解上面讲解的各种移动图片代码设置要点。
（2）用上面讲解的五种移动图片代码，各制作一篇文章并观察其效果。
２０1２年 1 1月 2 日于北京
第 二 章 标 签 应 用
第十二节 移动图片（4）
本节继续学习图片的移动。下面讲解图片的四种移动代码，这四种移动代码一般都是使用一个图片，不使用多个图片。
1、从左下到右上移动的图片代码：<marquee bgColor="#6495ed" direction="up" height="480" width="480" scrollAmount="5">
<marquee direction="right" height="250" width="100%" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width="250" height="250"></marquee></marquee>
代码解析：
（1）从“左下到右上”移动的图片代码，由移动方向“向上”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。
（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。
（3）图片的规格，不宜过大，以100px至250px为宜。
（4）图片标签代码注释：<图片标签 css样式＝“滤镜：设置透明度（透明度＝100，样式＝2）”>。透明度默认的范围是从0 到 100，他们其实是百分比的形式，1到0之间的任何值都表示该元素的透明程度。也就是说，0代表完全透明，100代表完全不透明。
2、从右下到左上移动的图片代码：
<marquee bgColor="#6495ed" direction="up" height="480" width="480" scrollAmount="5">
<marquee height="250" width="100%" scrollAmount="5">
<img style="filter: alpha(opacity=100,style=2);" src="http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width="250" height="250"></marquee></marquee>
代码解析：
（1）从“右下到左上”的移动图片代码，由移动方向“向上”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。
（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。
（3）图片的规格，不宜过大，以100px至250px为宜。
（4）图片标签代码注释：<图片标签 css样式＝“滤镜：设置透明度（透明度＝100，样式＝2）”>。透明度默认的范围是从0 到 100，他们其实是百分比的形式，1到0之间的任何值都表示该元素的透明程度。也就是说，0代表完全透明，100代表完全不透明。
代码解析：
（1）从“左上到右下”的移动图片代码，由移动方向“向下”和“向右”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。
（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。
（3）图片的规格，不宜过大，以100px至250px为宜。
代码解析：
（1）从“右上到左下”的移动图片代码，由移动方向“向下”和“向左”的两个移动标签控制一个图片。两个移动标签中都设置了移动屏幕的宽度和高度；图片标签中应用了css的滤镜样式，设置了图片的宽度与高度。
（2）两个移动标签中的“移动方向”可以互换，移动速度可以设置也可以不设置，移动屏幕的规格，必须设置。
（3）图片的规格，不宜过大，以100px至250px为宜。
作业：
1、认真阅读代码分析，掌握代码设置要点。
2、上面讲解的图片的四种移动代码，都是用两个移动标签控制一个图片。代码中图片规格与移动屏幕规格的设置非常重要，如果设置不好，就会出现“图片的某个部分”在移动屏幕中移动的现象。试着改变一下图片规格与移动屏幕规格，看看显示效果，揣摩其中的奥秘。
3、用上面的四种移动标签，各自发表一篇文章。可以替换图片地址，可以修改移动速度，修改移动屏幕的高度与宽度。图片的宽度与高度，最好与第二个移动标签屏幕的宽度和高度相同；一定要小于第一个移动标签的宽度和高度。
