項目二 任務(wù)4 表格的應(yīng)用4----marquee對象

1、項目二 “鮮花配送”網(wǎng)站 教學(xué)班級課時2任課教師仝素梅授課課題任務(wù)4 表格的應(yīng)用4-marquee對象教學(xué)目標(biāo)：1. 熟練運(yùn)用marquee標(biāo)記制作滾動文字或滾動圖片教學(xué)重點：1marquee標(biāo)記的各個屬性教學(xué)難點 1多行文字滾動和多幅圖片滾動教學(xué)環(huán)境機(jī)房+電子教室教學(xué)過程教學(xué)內(nèi)容上節(jié)回顧1. 按照鏈接路徑的不同,網(wǎng)頁中超鏈接一般分為哪3種類型?2. 如果按照使用對象的不同，網(wǎng)頁中的鏈接又可以分為哪幾種類型？3. 插入背景音樂通常用什么標(biāo)記？4. 利用embed標(biāo)記插入swf影片文件時，用什么時候參數(shù)可以將swf影片文件的背景設(shè)為透明色新課講授任務(wù)4 建立“滾動文字”頁面一、“滾動文字”頁面（

2、tab4-1.html）效果圖“滾動文字”頁面（tab4-1.html）效果如圖2-16所示。圖2-16 “滾動文字”頁面二、marquee標(biāo)記1. 基本語法:滾動文字或圖片 標(biāo)記具體屬性和事件見表2-11所示。表2-11 標(biāo)記屬性和事件屬性說direction滾動方向，left(向左),、right（向右）、up（向上）、down（向下）bihavior設(shè)定滾動的方式：alternate： 表示在兩端之間來回滾動。scroll： 表示由一端滾動到另一端，會重復(fù)。slide： 表示由一端滾動到另一端，不會重復(fù)。loop設(shè)定滾動的次數(shù)，當(dāng)loop=”-1”表示一直滾動下去，默認(rèn)為-1（或infi

3、nite）無限循環(huán)（默認(rèn)）scrollamount設(shè)定活動字幕的滾動速度，單位pixelsscrolldelay設(shè)定活動字幕滾動兩次之間的延遲時間，單位millisecond（毫秒），值大了會有一步一停頓的效果 Align設(shè)定標(biāo)簽內(nèi)容的對齊方式absbottom：絕對底部對齊（與g、p等字母的最下端對齊）absmiddle：絕對中央對齊baseline：底線對齊bottom：底部對齊（默認(rèn)）left：左對齊middle：中間對齊right：右對齊texttop：頂線對齊top：頂部對齊bgcolor設(shè)定活動字幕的背景顏色，背景顏色可用RGB、16進(jìn)制值的格式或顏色名稱來設(shè)定。height設(shè)定活

4、動字幕的高度width設(shè)定活動字幕的寬度hspace設(shè)定活動字幕里所在的位置距離父容器水平邊框的距離vspace設(shè)定活動字幕里所在的位置距離父容器垂直邊框的距離onmouseover=this.stop(); 用來設(shè)置鼠標(biāo)移出該區(qū)域時繼續(xù)滾動onmouseout=this.start();用來設(shè)置鼠標(biāo)移入該區(qū)域時停止?jié)L動說明：marquee 元素的默認(rèn)寬度與其父元素的寬度相等。如果 marquee位于沒有指定寬度的td 內(nèi)，你就需要明確設(shè)置 marquee的寬度。如果 marquee 和 td的寬度都沒有指定，那么滾動字幕就將限定于 1 個像素寬。2.代碼分析 向左循環(huán)滾動方法一：向左循環(huán)滾動

5、 方法二：向左循環(huán)滾動 左右交替滾動 我先向左滾動,然后向右滾動,并一直交替滾動下去 向左滾動一次 我只向左滾動一次 每向左走100px，就停半秒（即500毫秒）我走一步，停一停！ 文字向上滾動，滾動高度為120px，這字幕與單元格的垂直間距為50像素、水平間距為5px,背景色為黃色， 我向上滾動 我也向上滾動 鼠標(biāo)指向我時停止?jié)L動(onmouseover=this.stop();) 鼠標(biāo)離開我時繼續(xù)滾動(onMouseOut=this.start();) 我在滾動時與單元格的垂直間距為50像素、水平間距為5px三、“滾動文字”頁面（tab4-1.html）代碼 我是所有參數(shù)都默認(rèn)的滾動方式

6、我向左滾動(direction=left behavior=scroll),效果與所有參數(shù)都默認(rèn)的滾動方式向同 我向右滾動(direction=right) 我先向左滾動,然后向右滾動,并一直交替滾動下去(direction=left behavior=alternate) 我只向左滾動一次(direction=left behavior=slide) 啦啦啦，注意了，我只在左半格內(nèi)走 3 趟，然后就消失了(loop=3 width=“50%” behavior=scroll)！ 啦啦啦，我走一步，停一停！(crolldelay=500 scrollamount=100) 啦啦啦，我會移動耶！

7、我有背景色(bgcolor=aaaaee height=40)。 先向右運(yùn)動,再向左運(yùn)動(direction=right behavior=alternate loop=2 hspace=30) 我是4號,向下滾動 我是3號,向下滾動 我是2號,向下滾動 我是1號,向下滾動 我們四個是列表兄弟: 我向上滾動 我也向上滾動 我和它們一樣,也向上滾動 direction=up height=120 bgcolor=#FFFF00 鼠標(biāo)指向我時停止?jié)L動(onmouseover=this.stop();) 鼠標(biāo)離開我時繼續(xù)滾動(onMouseOut=this.start();) 我在滾動時離左右兩端有50像素的距離,離上下邊界有5像素的距離(space=50 vspace=5) 隨堂實訓(xùn)1. 建立“滾動文字”頁面（tab4-1.html），效果如圖2-16所示。小結(jié)本節(jié)主要講述了利用marquee標(biāo)記建立文字和圖片滾動效果，控制好滾動對象的移動速度、移動方向、鼠標(biāo)移過時停止和鼠標(biāo)離開時繼續(xù)