10.3　图片的移动

如今的电子商城为了展示商品，都将商品图片通过移动来表现出效果，把所有的商品图片放到marquee中，然后通过处理使图片移动，达到在很小的空间展示更多的内容的效果，而且加强了用户的体验感。

下面的代码表示一张图片在标记＜marquee＞中移动，而且设置了对象的宽为600像素，高为200像素，背景颜色为#666666，如代码10.3所示。

代码10.3　源代码\第10章\图片的移动.html

——————————————-文件名：图片的移动.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞图片的移动＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置移动区域大小—＞

07 ＜marquee width="600px"height="200px"bgcolor="#666666"＞

08 ＜img src="仙境.gif"＞图片的大小在marquee中移动

09 ＜/marquee＞

10 ＜/body＞

11 ＜/html＞

【代码解析】代码第7～9行设置了图片的移动，使图片和文本从右往左移动，而且是不停地循环移动，这时图片和文本属于同一个对象，文本与图片默认对齐，即图片与文本底部对齐，效果如图10.5所示。

图　10.5　图片的移动

技巧　设置对象的移动时，可以在有限的区域内设置更多内容，所移动的对象只在这个区域中。