第二十三节 移动标签的应用（16）

图片的移动（6）

本节继续学习图片的移动。下面讲解图片的两种移动代码。要深刻领会标签中的内容，学会应用这些移动标签。

一、多图片分割移动图代码：

<table border="5" cellSpacing="5" cellPadding="3" width="650" height="210">
<tbody>
<tr>
<td align="center">
<marquee width="120" scrollAmount="2" scrollDelay="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_2" height="210" real_src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_2"></marquee></td>
<td align="center">
<marquee width="120" scrollAmount="2" scrollDelay="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_3" height="210" real_src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_3"></marquee></td>
<td align="center">
<marquee width="120" scrollAmount="2" scrollDelay="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_4" height="210" real_src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_4"></marquee></td>
<td align="center">
<marquee width="120" scrollAmount="2" scrollDelay="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_5" height="210" real_src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_5"></marquee></td>
<td align="center">
<marquee width="120" scrollAmount="2" scrollDelay="100"><img title="春天没来欢迎您" alt="春天没来欢迎您" src="//image52.360doc.com/DownloadImg/2012/06/1315/24828273_6" height="210" real_src="

http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_6"></marquee></td></tr></tbody></table>
<p> <wbr></p>

“多图片分割移动图”代码设置要点：

1、表格标签中必须设置表格的间距数值。例如：cellSpacing="5"

2、每个图片独占一个单元格，并由一个移动标签控制。

3、控制每个图片的移动标签最好都相同。

二、图中图 移动图代码：

<table style="width: 950px; height: 617px;" border="5" cellSpacing="0" borderColor="#990030" cellPadding="2" background="http://image27.360doc.com/DownloadImg/2011/04/2502/11198791_3.jpg" align="center">
<tbody>
<tr>
<td>
<marquee style="width: 790px; height: 500px;" direction="up" behavior="alternate" scrollAmount="5">
<marquee height="317" behavior="alternate" width="790" scrollAmount="5"> <img style="filter: alpha(opacity=100,style=2);" id="image_operate_27401302678376890" src="//image32.360doc.com/DownloadImg/2011/07/1211/14116499_6" width="250"></marquee>
</marquee></td></tr></tbody></table>

“图中图 移动图”代码设置要点：
1、设置一个表格，表格中放入一个背景图片，单元格中放入一个图片。
2、背景图片最好是规格大一些的风景图片；

3、第一个移动标签，移动方向“向上”，移动方式“来回走”；

4、第二个移动标签，移动方向“向左”，移动方式“来回走”。第二个移动标签的“移动屏幕宽度”可以和第一个移动标签的移动屏幕宽度相同，移动高度，必须小于第一个移动标签的移动屏幕高度。

5、两个移动标签中的移动速度最好相同。

6、表格个规格要比移动屏幕个规格大一些。

作业：

应用上面的两种移动代码，各制作一篇文章。