【网页设计】【HTML+CSS】【第10章 移动的字体和图片】

《【网页设计】【HTML+CSS】【第10章 移动的字体和图片】》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、·125·第10章移动的字体和图片不管是新闻网站还是电子商务网站，对及时新闻的显示或广告的滚动播出，都会用到移动显示。所谓的移动就是让对象动起来，对象包括文字和图片。移动属性语法用marquee表示，是双标记对，标记对里面放置的是将要移动的对象，可以是图片或文本等，所以中间放的就是将要移动的对象。学习本章，将会了解以下内容：移动属性的基本语法文字的移动图片的移动如何设置对象移动移动实例手把手10.1移动属性基本语法在网页中，可以让文字或图片在指定的区域动起来，看到的动可以是由上到下或者由下到上，还可以左右移动，也可以设置移动多少次。这些效果往往在商城中对卖得很火的产品设置移动，或有的公告也可

2、以移动，本节来分析和讲解这样的效果。移动属性是双标记的，其语法用marquee标签对表示，里面放的内容就是要移动的对象，完整语法如下：将要移动的文字或图片对象属性marquee默认的是向左循环移动，对象移动是在其所在的父对象的有效区域内，代码10.1表示属性基本语法用法。代码10.1源代码第10章移动的基本语法.htmlHTML+CSS完全自学手册---正在移动·126·

3、ody>代码10.1中，在中放入属性marquee标签对，然后输入文字表示将要移动，这是最简单的移动表示（还有几个可选参数没设置，不设置就是默认的），移动前效果如图10.1所示，移动后效果如图10.2所示。在设置marquee时，文本就在默认的区域从右向左移动，当在不同时间查看网页时，文本在网页的位置也不一样，如图10.2所示正处于从右边向中间移动的文本效果。其中速度也是默认的。图10.1对象移动前图10.2对象移动后说明：图10.1和图10.2其实二者都有动，在书本上只用两张网页移动位置不同来比较，要想看到真正的效果，请读者自己写语句或直接在随书光盘

4、的源代码第10章中查看，稍后介绍对移动属性设置的参数值。10.2文字的移动由10.1节可以知道，文字的移动就是在属性marquee标签对文字进行操作，不过在本小节中除了要用到上一节中介绍的语法外，还要对本行的文字设置不同的移动方向。在实际应用中并非按默认向左移动，可能需要不同的方向移动才能表达出效果，这样就可以控制对象移动方向，本节来介绍文字对象的移动方向。移动属性中设置移动的方向是在移动属性marquee中，再来设置对象移动的方向，其语法用direction表示，可接left表示向左，也是默认值，还可以接right，表示向右移动，完整语法如下：在属性

5、marquee中，设置方向值direction，其中#可以选择是left和right的一种，表示对象向左还是向右移动，当不设置direction值时，系统默认向左，与设置direction值为left是一样的效果，代码10.2中，一行文字表示向左移动，另一行文字表示向右移动。代码10.2源代码第10章文字的移动方向.html·127·HTML+CSS完全自学手册---正在向左移动HTML+CSS完全自学手册---正在向左移动代码10.2中，用两个marquee来移动两行文字，第一行表示默认的方向（没有写出direction值，按系统默认方向移动），而第二行中，对direction设置为right，即向右方面移动，这样两个方向的表现就出来了，这样的效果用两张图表示，方便比较两者之间的移动，移动前效果如图10.3所示，移动后效果如图10.3所示。比较两图，在不同的时刻文本的位置在变化，正是因为文本移动产生的作用，而文本的流向是由右和左，速度也是默认的（流

7、向和速度等都可以设置），文本移动后的效果如图10.4所示。图10.3对象往各方向移动前图10.4对象往各方向移动后注意：如果设置direction为left，与不设置本参数一样，可以省掉，但要注意该参数用法和设置。10.3图片的移动现在的商城为了展示商品，都将商品图片通过移动来表现出效果，把所有的商品图片放到marquee中，然后通过处理使图片移动，达到在很小的空间可以展示更多的内容，而且加强了用户的体验感。