10.5　移动实例—电影结束效果

在本实例中演示电影播放完后出现演员表的效果，演员表等文字是向上移动的，而且上下两部分的背景黑边用两个层设置定位，下面用HTML标记在网页中来实现这种样式。

移动的对象需要用到移动标记对＜marquee＞＜/marquee＞，标记对内的对象即是移动的对象，默认是从右向左移动，而且是不停地移动。如要改变这些默认设置，就得设置标记＜marquee＞中的参数。

实例部分主要列出其代码，不再按步骤讲解，因为还没讲到CSS知识，很多内容读者还不太明白，但只要明白这种效果是用marquee标记演示出的即可，通过对以后内容的学习会慢慢理解本节中的用法，下面通过CSS与HTML标记结合，来演示电影结束时的效果，如代码10.5所示。

代码10.5　源代码\第10章\移动实例手把手—让图片像电影动起来.html

—————————文件名：移动实例手把手—让图片像电影动起来.html—————————-

01 ＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

02 "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

03 ＜html＞

04 ＜head＞

05 ＜title＞移动实例手把手—让图片像电影动起来＜/title＞

06 ＜style type="text/css"＞

07 #movie

08 {

09 /CSS代码：设置容器层，margin设置auto表示对象居中/

10 margin：auto；

11 /设置宽度和高度/

12 width：350px；

13 height：280px；

14 /设置边框/

15 border：1px solid#000000；

16 /设置容器层为相对定位/

17 position：relative；

18 /字体大小为15像素/

19 font-size：15px；

20 /文本居中/

21 text-align：center；

22 }

23 #movieup

24 {

25 /容器层上面的黑层，宽为100%，高为50像素/

26 width：100%；

27 height：50px；

28 /绝对定位/

29 position：absolute；

30 /与顶端的距离为0/

31 top：0px；

32 /设置背景为黑色/

33 background：#000000；

34 }

35 #moviedown

36 {

37 /容器层的下面黑色层，与上面的层一样/

38 width：100%；

39 height：50px；

40 position：absolute；

41 bottom：0px；

42 left：0；

43 background：#000000；

44 }

45 ＜/style＞

46 ＜/head＞

47 ＜body＞

48 ＜div id="movie"＞

49 ＜div id="movieup"＞＜/div＞

50 ＜marquee direction="up"＞

51 ＜p＞

52 HTML+CSS完全自学手册

53

54 ＜p＞

55 HTML+CSS完全自学手册

56

57 ＜p＞

58 HTML+CSS完全自学手册

59

60 ＜p＞

61 HTML+CSS完全自学手册

62

63 ＜/marquee＞

64 ＜div id="moviedown"＞＜/div＞

65 ＜/div＞

66 ＜/body＞

67 ＜/html＞

【代码解析】在代码中，设置了一个容器层，然后在代码第33、43行用定位（position）把容器层的上下两处设置为黑色背景的，像电影一样，而将文字设置为往上移动，类似于电影的结束画面，效果如图10.7所示。

注意　标记marquee的其他用法在前面小节中已介绍过，如读者还要添加其他效果，可以直接在＜marquee＞中添加参数。

图　10.7　电影结束效果