代碼入門教程（13）

第 二 章 標 簽 應 用第十一節 移動圖片（3）

本節繼續學習圖片的移動。下面講解圖片的五種移動代碼。這五種移動圖片代碼，都可以製作成小模塊使用。要深刻領會代碼中的內容，學會應用這些移動圖片代碼。一、相背而行的圖片代碼：代碼1：（上下相背）<marquee direction="up" height="100" width_="650"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="down" height="100" width_="650"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析：1、「上下相背而行」的圖片代碼，由「向上」和「向下」移動的兩個移動標籤分別控制六個小圖片，移動標籤中都設置了移動屏幕的高度和寬度。2、各個移動標籤中小圖片的總寬度，一般不能超過670px,如果超過了670px，小圖片就不在同一行顯示了。3、去掉上面移動標籤中的「移動屏幕高度和寬度」，看看又是什麼效果？想想為什麼？（答案：移動屏幕的高度和寬度，是系統默認的高度和寬度了。寬度沒有多大的變化，高度變大了。）代碼2：（左右相背）<marquee height="100" width_="300"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="right" height="100" width_="300"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析：1、「左右相背而行」的圖片代碼，由「向左」和「向右」移動的兩個移動標籤分別控制六個小圖片，移動標籤中都設置了移動屏幕的高度和寬度。2、「左右相背而行」的圖片代碼，必須設置移動屏幕的高度和寬度。各個移動標籤中小圖片的總寬度，一般不能超過335px,如果超過了335px，小圖片就不在同一行顯示了。3、「左右相背而行」的圖片代碼，兩個移動標籤的位置不可調換。4、去掉上面移動標籤中的「移動屏幕高度和寬度」，看看又是什麼效果？想想為什麼？（答案：移動屏幕的高度和寬度，是系統默認的高度和寬度了。寬度沒有多大的變化，高度變為200px了。向左移動的小圖片和向右移動的小圖片分為兩行顯示了。）

二、相對而行的圖片代碼：代碼1：（上下相對而行）<marquee direction="down" height="100" width_="650"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee direction="up" height="100" width_="650"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析：（1）「上下相對而行的圖片代碼」由「向下」和「向上」移動的兩個移動標籤分別控制六個小圖片，移動標籤中都設置了移動屏幕的高度和寬度。(2)各個移動標籤中小圖片的總寬度，一般不能超過670px,如果超過了670px，小圖片就不在同一行顯示了。 ( 3)去掉上面移動標籤中的「移動屏幕高度和寬度」，看看又是什麼效果？想想為什麼？（答案：移動屏幕的高度和寬度，是系統默認的高度和寬度了。寬度沒有多大的變化，高度變大了。）代碼2：（左右相對而行）<marquee direction="right" height="100" width_="300"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><marquee height="100" width_="300"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析： (1)「左右相對而行」的圖片代碼，由「向右」和「向左」移動的兩個移動標籤分別控制六個小圖片，移動標籤中都設置了移動屏幕的高度和寬度。(2)「左右相對而行」的圖片代碼，必須設置移動屏幕的高度和寬度。各個移動標籤中小圖片的總寬度，一般不能超過335px,如果超過了335px，小圖片就不在同一行顯示了。(3) 「左右相對而行」的圖片代碼，兩個移動標籤的位置不可調換。(4)去掉上面移動標籤中的「移動屏幕高度和寬度」，看看又是什麼效果？想想為什麼？（答案：移動屏幕的高度和寬度，是系統默認的高度和寬度了。寬度沒有多大的變化，高度變為200px了。向左移動的小圖片和向右移動的小圖片分為兩行顯示了。）三、左右搖擺的圖片代碼：<marquee height="90" behavior="alternate" width_="170"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee height="90" behavior="alternate" width_="170"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_10.jpg" height="90"><marquee height="90" behavior="alternate" width_="170"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image55.360doc.com/DownloadImg/2012/09/0708/26671783_4.jpg" height="100"></marquee>代碼解析：（1）左右搖擺的圖片，相鄰的兩個圖片，一個要用移動標籤控制，另一個不用移動標籤控制。（2）左右搖擺的圖片，圖片規格不宜太大，一般以100px左右為宜。（3）移動標籤中要設置移動屏幕的寬度與高度，要設置來回走的移動方式。作業：（1）認真閱讀代碼解析，理解上面講解的各種移動圖片代碼設置要點。（2）用上面講解的五種移動圖片代碼，各製作一篇文章並觀察其效果。

２０1２年 1 1月 2 日於北京

第 二 章 標 簽 應 用第十二節 移動圖片（4）

本節繼續學習圖片的移動。下面講解圖片的四種移動代碼，這四種移動代碼一般都是使用一個圖片，不使用多個圖片。1、從左下到右上移動的圖片代碼：<marquee bgColor="#6495ed" direction="up" height="480" width_="480" scrollAmount="5"><marquee direction="right" height="250" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="https://www.getit01.com/getimg_360.php?url=http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width_="250" height="250"></marquee></marquee>代碼解析：（1）從「左下到右上」移動的圖片代碼，由移動方向「向上」和「向右」的兩個移動標籤控制一個圖片。兩個移動標籤中都設置了移動屏幕的寬度和高度；圖片標籤中應用了css的濾鏡樣式，設置了圖片的寬度與高度。（2）兩個移動標籤中的「移動方向」可以互換，移動速度可以設置也可以不設置，移動屏幕的規格，必須設置。（3）圖片的規格，不宜過大，以100px至250px為宜。（4）圖片標籤代碼注釋：<圖片標籤 css樣式＝「濾鏡：設置透明度（透明度＝100，樣式＝2）」>。透明度默認的範圍是從0 到 100，他們其實是百分比的形式，1到0之間的任何值都表示該元素的透明程度。也就是說，0代表完全透明，100代表完全不透明。2、從右下到左上移動的圖片代碼：<marquee bgColor="#6495ed" direction="up" height="480" width_="480" scrollAmount="5"><marquee height="250" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="https://www.getit01.com/getimg_360.php?url=http://image48.360doc.com/DownloadImg/2012/01/1219/20707724_7" width_="250" height="250"></marquee></marquee>代碼解析：（1）從「右下到左上」的移動圖片代碼，由移動方向「向上」和「向左」的兩個移動標籤控制一個圖片。兩個移動標籤中都設置了移動屏幕的寬度和高度；圖片標籤中應用了css的濾鏡樣式，設置了圖片的寬度與高度。（2）兩個移動標籤中的「移動方向」可以互換，移動速度可以設置也可以不設置，移動屏幕的規格，必須設置。（3）圖片的規格，不宜過大，以100px至250px為宜。（4）圖片標籤代碼注釋：<圖片標籤 css樣式＝「濾鏡：設置透明度（透明度＝100，樣式＝2）」>。透明度默認的範圍是從0 到 100，他們其實是百分比的形式，1到0之間的任何值都表示該元素的透明程度。也就是說，0代表完全透明，100代表完全不透明。

3、從左上到右下移動的圖片代碼：<marquee direction="down" height="480" width_="480" scrollAmount="5"><marquee direction="right" height="250" scrollAmount="5"><img src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg" width_="250" height="250"></marquee></marquee>代碼解析：（1）從「左上到右下」的移動圖片代碼，由移動方向「向下」和「向右」的兩個移動標籤控制一個圖片。兩個移動標籤中都設置了移動屏幕的寬度和高度；圖片標籤中應用了css的濾鏡樣式，設置了圖片的寬度與高度。（2）兩個移動標籤中的「移動方向」可以互換，移動速度可以設置也可以不設置，移動屏幕的規格，必須設置。（3）圖片的規格，不宜過大，以100px至250px為宜。4、從右上到左下移動的圖片代碼：<marquee bgColor="#6495ed" direction="down" height="480" width_="480" scrollAmount="5"><marquee height="250" scrollAmount="5"><img style="filter: alpha(opacity=100,style=2);" src="https://www.getit01.com/getimg_360.php?url=http://userimage2.360doc.com/11/0613/16/4086709_201106131657330633.jpg" width_="250" height="250"></marquee></marquee>代碼解析： （1）從「右上到左下」的移動圖片代碼，由移動方向「向下」和「向左」的兩個移動標籤控制一個圖片。兩個移動標籤中都設置了移動屏幕的寬度和高度；圖片標籤中應用了css的濾鏡樣式，設置了圖片的寬度與高度。（2）兩個移動標籤中的「移動方向」可以互換，移動速度可以設置也可以不設置，移動屏幕的規格，必須設置。（3）圖片的規格，不宜過大，以100px至250px為宜。作業：1、認真閱讀代碼分析，掌握代碼設置要點。2、上面講解的圖片的四種移動代碼，都是用兩個移動標籤控制一個圖片。代碼中圖片規格與移動屏幕規格的設置非常重要，如果設置不好，就會出現「圖片的某個部分」在移動屏幕中移動的現象。試著改變一下圖片規格與移動屏幕規格，看看顯示效果，揣摩其中的奧秘。3、用上面的四種移動標籤，各自發表一篇文章。可以替換圖片地址，可以修改移動速度，修改移動屏幕的高度與寬度。圖片的寬度與高度，最好與第二個移動標籤屏幕的寬度和高度相同；一定要小於第一個移動標籤的寬度和高度。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)

２０１２年 1 1月2 日於北京
推薦閱讀：