项目二任务表格的应用marquee对象.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,山东理工职业学院信息工程系,前台页面设计,项目二 “鲜花配送”网站,山东理工职业学院信息工程系,任务,4,表格的应用,4-marquee,对象,教学目标,教学重点,教学难点,熟练运用,marquee,标记制作滚动文字或滚动图片,marquee,标记的各属性,多行文字滚动和多幅图片滚动,我是1号,向下滚动,“滚动文字”页面（tab4-1.,“滚动文字”页面（tab4-1.,“滚动文字”页面（tab4-1.,我是2号,向下滚动,start();),在父框架集中打开被链接文档。,建立“滚动文字”页面,“滚动文字”页面效果图,1,marquee,标记,2,3,“滚动文字”页面代码,3,“滚动文字”页面（tab4-1.,山东理工职业学院信息工程系,marquee标记的各属性,我是所有参数都默认的滚动方式,我和它们一样,也向上滚动,我是1号,向下滚动,Millisecond,“滚动文字”页面（tab4-1.,“滚动文字”页面（tab4-1.,1建立“滚动文字”页面（tab4-1.,“滚动文字”页面（tab4-1.,baseline：底线对齐,“滚动文字”页面效果图,marquee,标记,基本语法,1,标记属性和事件,2,代码分析,3,marquee,标记基本语法,:,语 法,滚动文字或图片,标记属性和事件,(,一,),滚,动,方,向,direction,left(,向左,),right,（向右）,up,（向上）,down,（向下）,标记属性和事件,(,二,),alternate,scroll,slide,表示在两,端之间来,回滚动,表示由一端,滚动到另一,端，会重复,bihavior,设定滚动的方式,表示由一端,滚动到另一,端，不会重复,标记属性和事件,(,三,),设定滚动的次数,loop,当,loop=”-1”,表示一,直滚动下去，默认,为,-1,（或,infinite,）,无限循环（默认）,标记属性和事件,(,四,),scrollamount,scrolldelay,bgcolor,设定活动,字幕的滚,动速度，,单位,pixels,设定活动字,幕滚动两次,之间的延迟,时间，单位,Millisecond,（毫秒），值,大了会有一步,一停顿的效果,设定活动字,幕的背景颜,色，背景颜,色可用,RGB,、,16,进制值的,格式或颜色,名称来设定。,标记属性和事件,(,五,),height,width,hspace,vspace,设定活动字幕的高度,设定活动字幕的宽度,设定活动,字幕里所,在的位置,距离父容,器水平边,框的距离,设定活动,字幕里所,在的位置,距离父容,器垂直边,框的距离,标记属性和事件,(,六,),Align,设定,标签内容的对齐方式,absbottom,：绝对底部对齐（与,g,、,p,等字母的最下端对齐）,absmiddle,：绝对中央对齐,baseline,：底线对齐,bottom,：底部对齐（默认）,left,：左对齐,middle,：中间对齐,right,：右对齐,texttop,：顶线对齐,top,：顶部对齐,标记属性和事件,(,七,),用来设置鼠标移出该区域时继续滚动,用来设置鼠标移入该区域时停止滚动,onmouseover=“this.stop();”,onmouseout=this.start();,标记属性和事件说明,如果,marquee,位于没有指定宽度的,td,内，你就需要明确设置,marquee,的宽度。,marquee,元素的默认宽度与其父元素的宽度相等。,如果,marquee,和,td,的宽度都没有指定，那么滚动字幕就将限定于,1,个像素宽。,1,2,3,代码分析（一）,向左循环滚动,方法一：,向左循环滚动,方法二：,向左循环滚动,代码分析（二）,左右交替滚动,我先向左滚动,然后向右滚动,并一直交替滚动下去,每向左走,100px,，就停半秒（即,500,毫秒）,向左滚动一次,我只向左滚动一次,我走一步，停一停！,代码分析（二）,文字向上滚动，滚动高度为,120px,，这字幕与单元格的垂直间距为,50,像素、水平间距为,5px,背景色为黄色，,我向上滚动,我也向上滚动,鼠标指向我时停止滚动,(onmouseover=this.stop();),鼠标离开我时继续滚动,(onMouseOut=this.start();),我在滚动时与单元格的垂直间距为,50,像素、水平间距为,5px,“滚动文字”页面（,tab4-1.html,）代码（一）,我是所有参数都默认的滚动方式,“滚动文字”页面（,tab4-1.html,）代码（二）,我向左滚动,(direction=“left”behavior=“scroll”),效果与所有参数都默认的滚动方式相同,“滚动文字”页面（,tab4-1.html,）代码（三）,我向右滚动,(direction=right),我先向左滚动,然后向右滚动,并一直交替滚动下去,(direction=left behavior=alternate),“滚动文字”页面（,tab4-1.html,）代码（四）,我只向左滚动一次,(direction=left behavior=slide),“滚动文字”页面（,tab4-1.html,）代码（五）,啦啦啦，注意了，我只在左半格内走,3,趟，然后就消失了,(loop=3 width=“50%”behavior=scroll),！,“滚动文字”页面（,tab4-1.html,）代码（六）,啦啦啦，我走一步，停一停！,(crolldelay=500 scrollamount=100),“滚动文字”页面（,tab4-1.html,）代码（七）,啦啦啦，我会移动耶！我有背景色,(bgcolor=aaaaee height=40),。,“滚动文字”页面（,tab4-1.html,）代码（八）,先向右运动,再向左运动,(direction=right behavior=alternate loop=2 hspace=30),“滚动文字”页面（,tab4-1.html,）代码（九）,我是,4,号,向下滚动,我是,3,号,向下滚动,我是,2,号,向下滚动,我是,1,号,向下滚动,我们四个是列表兄弟,:,“滚动文字”页面（,tab4-1.html,）代码（十）,我向上滚动,我也向上滚动,我和它们一样,也向上滚动,direction=up height=120 bgcolor=#FFFF00,鼠标指向我时停止滚动,(onmouseover=this.stop();),鼠标离开我时继续滚动,(onMouseOut=this.start();),我在滚动时离左右两端有,50,像素的距离,离上下边界有,5,像素的距离,(space=50 vspace=5),表,2-8,值,描 述,_blank,在新窗口中打开被链接文档。,_self,默认。在相同的框架中打开被链接文档。,_parent,在父框架集中打开被链接文档。,_top,在整个窗口中打开被链接文档。,framename,在指定的框架中打开被链接文档。,随堂实训,1,建立“滚动文字”页面（,tab4-1.html,），效果如图,2-16,所示。,小 结,本节主要讲述了利用,marquee,标记建立文字和图片滚动效果，控制好滚动对象的移动速度、移动方向、鼠标移过时停止和鼠标离开时继续滚动是成功建立滚动效果的关键因素。,themegallery,Thank You!,