项目二 任务4 表格的应用4----marquee对象

1、项目二 “鲜花配送”网站 教学班级课时2任课教师仝素梅授课课题任务4 表格的应用4-marquee对象教学目标：1. 熟练运用marquee标记制作滚动文字或滚动图片教学重点：1marquee标记的各个属性教学难点 1多行文字滚动和多幅图片滚动教学环境机房+电子教室教学过程教学内容上节回顾1. 按照链接路径的不同,网页中超链接一般分为哪3种类型?2. 如果按照使用对象的不同，网页中的链接又可以分为哪几种类型？3. 插入背景音乐通常用什么标记？4. 利用embed标记插入swf影片文件时，用什么时候参数可以将swf影片文件的背景设为透明色新课讲授任务4 建立“滚动文字”页面一、“滚动文字”页面（

2、tab4-1.html）效果图“滚动文字”页面（tab4-1.html）效果如图2-16所示。图2-16 “滚动文字”页面二、marquee标记1. 基本语法:滚动文字或图片 标记具体属性和事件见表2-11所示。表2-11 标记属性和事件属性说direction滚动方向，left(向左),、right（向右）、up（向上）、down（向下）bihavior设定滚动的方式：alternate： 表示在两端之间来回滚动。scroll： 表示由一端滚动到另一端，会重复。slide： 表示由一端滚动到另一端，不会重复。loop设定滚动的次数，当loop=”-1”表示一直滚动下去，默认为-1（或infi

3、nite）无限循环（默认）scrollamount设定活动字幕的滚动速度，单位pixelsscrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒），值大了会有一步一停顿的效果 Align设定标签内容的对齐方式absbottom：绝对底部对齐（与g、p等字母的最下端对齐）absmiddle：绝对中央对齐baseline：底线对齐bottom：底部对齐（默认）left：左对齐middle：中间对齐right：右对齐texttop：顶线对齐top：顶部对齐bgcolor设定活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。height设定活

4、动字幕的高度width设定活动字幕的宽度hspace设定活动字幕里所在的位置距离父容器水平边框的距离vspace设定活动字幕里所在的位置距离父容器垂直边框的距离onmouseover=this.stop(); 用来设置鼠标移出该区域时继续滚动onmouseout=this.start();用来设置鼠标移入该区域时停止滚动说明：marquee 元素的默认宽度与其父元素的宽度相等。如果 marquee位于没有指定宽度的td 内，你就需要明确设置 marquee的宽度。如果 marquee 和 td的宽度都没有指定，那么滚动字幕就将限定于 1 个像素宽。2.代码分析 向左循环滚动方法一：向左循环滚动

5、 方法二：向左循环滚动 左右交替滚动 我先向左滚动,然后向右滚动,并一直交替滚动下去 向左滚动一次 我只向左滚动一次 每向左走100px，就停半秒（即500毫秒）我走一步，停一停！ 文字向上滚动，滚动高度为120px，这字幕与单元格的垂直间距为50像素、水平间距为5px,背景色为黄色， 我向上滚动 我也向上滚动 鼠标指向我时停止滚动(onmouseover=this.stop();) 鼠标离开我时继续滚动(onMouseOut=this.start();) 我在滚动时与单元格的垂直间距为50像素、水平间距为5px三、“滚动文字”页面（tab4-1.html）代码 我是所有参数都默认的滚动方式

6、我向左滚动(direction=left behavior=scroll),效果与所有参数都默认的滚动方式向同 我向右滚动(direction=right) 我先向左滚动,然后向右滚动,并一直交替滚动下去(direction=left behavior=alternate) 我只向左滚动一次(direction=left behavior=slide) 啦啦啦，注意了，我只在左半格内走 3 趟，然后就消失了(loop=3 width=“50%” behavior=scroll)！ 啦啦啦，我走一步，停一停！(crolldelay=500 scrollamount=100) 啦啦啦，我会移动耶！

7、我有背景色(bgcolor=aaaaee height=40)。 先向右运动,再向左运动(direction=right behavior=alternate loop=2 hspace=30) 我是4号,向下滚动 我是3号,向下滚动 我是2号,向下滚动 我是1号,向下滚动 我们四个是列表兄弟: 我向上滚动 我也向上滚动 我和它们一样,也向上滚动 direction=up height=120 bgcolor=#FFFF00 鼠标指向我时停止滚动(onmouseover=this.stop();) 鼠标离开我时继续滚动(onMouseOut=this.start();) 我在滚动时离左右两端有50像素的距离,离上下边界有5像素的距离(space=50 vspace=5) 随堂实训1. 建立“滚动文字”页面（tab4-1.html），效果如图2-16所示。小结本节主要讲述了利用marquee标记建立文字和图片滚动效果，控制好滚动对象的移动速度、移动方向、鼠标移过时停止和鼠标离开时继续