设置滚动字幕代码

·125·第10章移动的字体和图片不管是新闻网站还是电子商务网站,对及时新闻的显示或广告的滚动播出,都会用到移动显示.
所谓的移动就是让对象动起来,对象包括文字和图片.
移动属性语法用marquee表示,是双标记对,标记对里面放置的是将要移动的对象,可以是图片或文本等,所以中间放的就是将要移动的对象.
学习本章,将会了解以下内容:移动属性的基本语法文字的移动图片的移动如何设置对象移动移动实例手把手10.
1移动属性基本语法在网页中,可以让文字或图片在指定的区域动起来,看到的动可以是由上到下或者由下到上,还可以左右移动,也可以设置移动多少次.
这些效果往往在商城中对卖得很火的产品设置移动,或有的公告也可以移动,本节来分析和讲解这样的效果.
移动属性是双标记的,其语法用marquee标签对表示,里面放的内容就是要移动的对象,完整语法如下:将要移动的文字或图片对象属性marquee默认的是向左循环移动,对象移动是在其所在的父对象的有效区域内,代码10.
1表示属性基本语法用法.
代码10.
1源代码\第10章\移动的基本语法.
html移动的基本语法HTML+CSS完全自学手册---正在移动·126·代码10.
1中,在中放入属性marquee标签对,然后输入文字表示将要移动,这是最简单的移动表示(还有几个可选参数没设置,不设置就是默认的),移动前效果如图10.
1所示,移动后效果如图10.
2所示.
在设置marquee时,文本就在默认的区域从右向左移动,当在不同时间查看网页时,文本在网页的位置也不一样,如图10.
2所示正处于从右边向中间移动的文本效果.
其中速度也是默认的.
图10.
1对象移动前图10.
2对象移动后说明:图10.
1和图10.
2其实二者都有动,在书本上只用两张网页移动位置不同来比较,要想看到真正的效果,请读者自己写语句或直接在随书光盘的源代码第10章中查看,稍后介绍对移动属性设置的参数值.
10.
2文字的移动由10.
1节可以知道,文字的移动就是在属性marquee标签对文字进行操作,不过在本小节中除了要用到上一节中介绍的语法外,还要对本行的文字设置不同的移动方向.
在实际应用中并非按默认向左移动,可能需要不同的方向移动才能表达出效果,这样就可以控制对象移动方向,本节来介绍文字对象的移动方向.
移动属性中设置移动的方向是在移动属性marquee中,再来设置对象移动的方向,其语法用direction表示,可接left表示向左,也是默认值,还可以接right,表示向右移动,完整语法如下:在属性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所示.
比较两图,在不同的时刻文本的位置在变化,正是因为文本移动产生的作用,而文本的流向是由右和左,速度也是默认的(流向和速度等都可以设置),文本移动后的效果如图10.
4所示.
图10.
3对象往各方向移动前图10.
4对象往各方向移动后注意:如果设置direction为left,与不设置本参数一样,可以省掉,但要注意该参数用法和设置.
10.
3图片的移动现在的商城为了展示商品,都将商品图片通过移动来表现出效果,把所有的商品图片放到marquee中,然后通过处理使图片移动,达到在很小的空间可以展示更多的内容,而且加强了用户的体验感.
·128·下面代码表示一张图片在标记中移动,而且设置了对象的宽为600像素,高为200像素,背景颜色为#666666,如代码10.
3所示.
代码10.
3源代码\第10章\图片的移动.
html图片的移动图片的大小在marquee中移动设置了图片的移动,使用图片和文本从右往左移动,而且是不停地循环地移动,这时图片和文本属于同一个对象,文本与图片默认对齐的,即图片与文本是底部对齐,效果如图10.
5所示.
图10.
5图片的移动技巧:设置对象的移动时,可以在有限的区域设置多些内容,所移动的对象只在这个区域中.
·129·10.
4如何设置对象移动如何设置对象的移动,当引入marquee后,如按默认值表现来的效果并不是当初想要的,还需要进行设置,如移动的方向,区域的大小,是否循环移动等都在标记中设置.
下面从移动方向、移动方式、移动速度、延时和宽度与高度来介绍标记的设置,从上面的实例中可以知道,默认的移动方面是从右向左,而在标记中可以设置从左向右或从上到下等方向移动.
10.
4.
1文本移动的方向移动的方向用参数direction表示,direction的英文意思就是方向.
这个参数的取值有四个:left(左)、right(右)、up(上)、down(下).
通过设置方向值就可以设置对象往哪个方向移动了,代码如下:向上移动代码表示文本"向上移动"从下往上移动,而且是一次又一次不停地移动着.

10.
4.
2文本的滚动循环如果想设置对象移动的方式,比如是滚动循环,语法用behavior表示,其后可选择参数为:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动),如下面代码表示来回移动.
哈哈,我来回走!
代码设置了文本来回移动,还可以设置文本在标记中循环的次数,设置循环用loop,其后可接上具体数值表示循环的次数,如下表示设置了只循环三次.

我只走三次哦10.
4.
3文本的移动速度还可以用scrollamount再设置移动的速度,可以设置很快也可以设置很慢,通过数值来设置,值取正整数.
数值越大,速度越快,如下代码表示文本在标记中移动的速度.