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

《【网页设计】【html+css】【第10章移动的字体和图片】》由会员分享，可在线阅读，更多相关《【网页设计】【html+css】【第10章移动的字体和图片】（10页珍藏版）》请在金锄头文库上搜索。

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

2、往往在商城中对卖得很火的 产品设置移动，或有的公告也可以移动，本节来分析和讲解这样的效果。 移动属性是双标记的，其语法用 marquee 标签对表示，里面放的内容就是要移动的对 象，完整语法如下： 将要移动的文字或图片对象 属性 marquee 默认的是向左循环移动，对象移动是在其所在的父对象的有效区域内， 代码 10.1 表示属性基本语法用法。 代码 10.1 源代码第 10 章移动的基本语法.html 移动的基本语法 HTML+CSS 完全自学手册-正在移动 126代码 10.1 中，在中放入属性 marquee 标签对，然后输入文字表示将要移 动，这是最简单的移动表示（还有几个可选参数没

3、设置，不设置就是默认的），移动前效 果如图 10.1 所示，移动后效果如图 10.2 所示。 在设置 marquee 时，文本就在默认的区域从右向左移动，当在不同时间查看网页时， 文本在网页的位置也不一样，如图 10.2 所示正处于从右边向中间移动的文本效果。其中速 度也是默认的。 图 10.1 对象移动前 图 10.2 对象移动后 说明： 图 10.1 和图 10.2 其实二者都有动， 在书本上只用两张网页移动位置不同来比较， 要想看到真正的效果，请读者自己写语句或直接在随书光盘的源代码第 10 章中查看，稍后 介绍对移动属性设置的参数值。 10.2 文字的移动 由 10.1 节可以知道，文

4、字的移动就是在属性 marquee 标签对文字进行操作，不过在本 小节中除了要用到上一节中介绍的语法外，还要对本行的文字设置不同的移动方向。在实 际应用中并非按默认向左移动，可能需要不同的方向移动才能表达出效果，这样就可以控 制对象移动方向，本节来介绍文字对象的移动方向。 移动属性中设置移动的方向是在移动属性 marquee 中，再来设置对象移动的方向，其 语法用 direction 表示，可接 left 表示向左，也是默认值，还可以接 right，表示向右移动， 完整语法如下： 在属性 marquee 中，设置方向值 direction，其中#可以选择是 left 和 right 的一种，表

5、示 对象向左还是向右移动，当不设置 direction 值时，系统默认向左，与设置 direction 值为 left 是一样的效果，代码 10.2 中，一行文字表示向左移动，另一行文字表示向右移动。 代码 10.2 源代码第 10 章文字的移动方向.html 127文字的移动方向 HTML+CSS 完全自学手册-正在向左移动 HTML+CSS 完全自学手册-正在向左移动 代码 10.2 中，用两个 marquee 来移动两行文字，第一行表示默认的方向（没有写出 direction 值，按系统默认方向移动），而第二行中，对 direction 设置为 right，即向右方面 移动，这样两个方向

6、的表现就出来了，这样的效果用两张图表示，方便比较两者之间的移 动，移动前效果如图 10.3 所示，移动后效果如图 10.3 所示。 比较两图，在不同的时刻文本的位置在变化，正是因为文本移动产生的作用，而文本 的流向是由右和左，速度也是默认的（流向和速度等都可以设置），文本移动后的效果如 图 10.4 所示。 图 10.3 对象往各方向移动前 图 10.4 对象往各方向移动后 注意：如果设置 direction 为 left，与不设置本参数一样，可以省掉，但要注意该参数用 法和设置。 10.3 图片的移动 现在的商城为了展示商品，都将商品图片通过移动来表现出效果，把所有的商品图片 放到 marq

7、uee 中，然后通过处理使图片移动，达到在很小的空间可以展示更多的内容，而 且加强了用户的体验感。 128下面代码表示一张图片在标记中移动，而且设置了对象的宽为 600 像素，高 为 200 像素，背景颜色为#666666，如代码 10.3 所示。 代码 10.3 源代码第 10 章图片的移动.html 图片的移动 图片的大小在 marquee 中移动 设置了图片的移动，使用图片和文本从右往左移动，而且是不停地循环地移动，这时 图片和文本属于同一个对象，文本与图片默认对齐的，即图片与文本是底部对齐，效果如 图 10.5 所示。 图 10.5 图片的移动 技巧：设置对象的移动时，可以在有限的区域

8、设置多些内容，所移动的对象只在这个 区域中。 12910.4 如何设置对象移动 如何设置对象的移动，当引入 marquee 后，如按默认值表现来的效果并不是当初想要 的，还需要进行设置，如移动的方向，区域的大小，是否循环移动等都在标记中 设置。 下面从移动方向、移动方式、移动速度、延时和宽度与高度来介绍标记的设置，从上 面的实例中可以知道，默认的移动方面是从右向左，而在标记中可以设置从左向右或从上 到下等方向移动。 10.4.1 文本移动的方向 移动的方向用参数 direction 表示， direction 的英文意思就是方向。 这个参数的取值有四 个：left（左）、right（右）、up

9、（上）、down（下）。通过设置方向值就可以设置对象往 哪个方向移动了，代码如下： 向上移动 代码表示文本“向上移动”从下往上移动，而且是一次又一次不停地移动着。 10.4.2 文本的滚动循环 如果想设置对象移动的方式，比如是滚动循环，语法用 behavior 表示，其后可选择参 数为：scroll（循环移动）、slide（只移动一个回合）、alternate（来回移动），如下面代码 表示来回移动。 哈哈，我来回走！ 代码设置了文本来回移动，还可以设置文本在标记中循环的次数，设置循环 用 loop，其后可接上具体数值表示循环的次数，如下表示设置了只循环三次。 我只走三次哦 10.4.3 文本的

10、移动速度 还可以用 scrollamount 再设置移动的速度，可以设置很快也可以设置很慢，通过数值来 设置，值取正整数。数值越大，速度越快，如下代码表示文本在标记中移动的速度。 看，我走多快！ 设置好移动的速度后，还可以设置对象的延时，延时用 scrolldelay 表示，单位是时间， 用毫秒表示，1000 毫秒表示 1 秒，下面是 1 秒延时。 我走一走，停一停 移动的区域是有限的，那么想得到更大的区域可以设置移动的区域，与其他属性一样 用 width 表示宽度而 height 表示高度，下面代码设置了区域的宽和高。 这个面积不够我移动！ 13010.4.4 应用文本的全部移动标记 前面是

11、常用的对移动标记的设置，下面用代码来演示上述所有功能。在实际中可以结 合这些设置让网页的字体动起来。 代码 10.4 源代码第 10 章设置对象移动.html 设置对象的移动 向上移动 哈哈，我来回走！ 我只走三次哦 看，我走多快！ 我走一走，停一停 这个面积不够我移动！在代码 10.4 中，通过设置不同对象的移动，来表现标记 marquee 的用法，在第一个 marquee 标记中，设置了向上移动的文本对象；在第二个 marquee 标记中，设置对象为来回 移动，设置参数 behavior 的值为 alternate，使对象在区域中来回移动；第三个移动标记中， 设置参数 loop 为 3，表

12、示只移动 3 次；在第四个移动标记中，设置参数 scrollamount 的值为 25，表示移动的速度；同理，第五个标记中，设置参数 scrolldelay 的值为 1000，数值单位 默认为毫秒，表示移动延迟为 1000 毫秒，刚好为 1 秒钟；在最后的移动标记中，设置了移 动的区域为 200 像素的宽和高，背景为 pink 颜色，移动的方向为 down，即向下，效果如图 10.6 所示。 131图 10.6 图片移动 注意：在设置移动标记的参数时，可以在标记内设置多个参数，综合这些参数在网页 中表现出效果。 10.5 移动实例手把手电影结束效果 本实例中，用实例演示像电影播放完后出现演员表

13、的效果，演员表等文字是往上面移 动的，而且上下两部分的背景黑边用两个层设置定位，下面用 HTML 标记在网页中来实现 这种样式。 移动的对象需要用到移动标记对，标记对内的对象即是移动的对 象，默认是从右向左移动，而且是不停的移动。如要改变这些默认设置，就得设置标记 中的参数。 实例部分主要列出其代码，不会按步骤来讲解了，因为还没讲到过 CSS 知识，很多内 容读者还不太明白，但只要明白这种效果是用 marquee 标记演示出的就行，通过对以后内 容的学习会慢慢理解本小节中的用法，下面通过 CSS 与 HTML 标记结合，来演示电影结束 时的效果，如代码 10.5 所示。 132代码 10.5

14、源代码第 10 章移动实例手把手让图片像电影动起来.html 移动实例手把手让图片像电影动起来 #movie /*CSS 代码：设置容器层，margin 设置 auto 表示对象居中*/ margin:auto; /*设置宽度和高度*/ width:350px; height:280px; /*设置边框*/ border:1px solid #000000; /*设置容器层为相对定位*/ position:relative; /*字体大小为 15 像素*/ font-size:15px; /*文本居中*/ text-align:center; #movieup /*容器层上面的黑层，宽为 10

15、0%，高为 50 像素*/ width:100%; height:50px; /*绝对定位*/ position:absolute; /*与顶端的距离为 0*/ top:0px; /*设置背景为黑色*/ background:#000000; #moviedown /*容器层的下面黑色层，与上面层一样。*/ width:100%; height:50px; position:absolute; bottom:0px; left:0; background:#000000; 133HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完全自学手册 HTML+CSS 完

16、全自学手册 在代码中，设置了一个容器层，然后用定位（position）把容器层的上下两处设置为黑 色背景的，像电影一样，而对文字的设置往上移动，类似于电影中的结束画面，效果如图 10.7 所示。 图 10.7 电影结束效果 注意：标记 marquee 的其他用法在前面小节中介绍过，如读者还要添加其他效果，可 以直接在中添加参数。 13410.6 小结 本章主要介绍了移动的文字和图片，属性值为 marquee，其语法中又对各属性值进行说 明，在实例中演示了其用法。文字移动和图片移动所用到的属性都是一样的，只是对象不 同而已，实例中，演示了图文混合的移动效果，类似于电影结束时播放的演员表和鸣谢表， 都是往上移动。最后本属性常常在网页特定区域使用，合理安排好空间对页面整体效果才 能更好表达出来。