代碼入門教程（14）

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

本節繼續學習圖片的移動。下面講解圖片的三種移動標籤。要深刻領會標籤中的內容，學會應用這些移動標籤。一、向「右上」和 「左上」斜著滾動合併的圖片代碼：<table border="0" width_="800" bgColor="#6495ed" height="400"><tbody><tr><td height="400" width_="400"><marquee 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" type="image" INPUT=""></marquee></marquee></td><td height="400" width_="400"><marquee 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" type="image" INPUT=""></marquee></marquee></td></tr></tbody></table>代碼解析：1、上面的代碼中，設置了一個寬度為800px高度為400px的一行二列的表格，在表格的兩個單元格中，各放入了一個移動圖片，一個向「右上」移動，一個向「左上」移動。圖片的高度和寬度，設置為移動屏幕高度和寬度的二分之一左右為宜。本代碼涉及到表格標籤，表格標籤的製作，我在以後的相關章節中講解。2、單元格中的每個圖片，都是用兩個移動標籤控制。向「右上」移動的圖片，用「向上」移動和「向右」移動的移動標籤控制；向「左上」移動的圖片，用「向上」移動和「向左」移動的移動標籤控制。3、圖片標籤解析：<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" type="image" ><貼圖標籤 css樣式＝「濾鏡：透明度（透明度等級＝100 也就是不透明，透明區域形狀＝2 也就是放射形）；」 圖片路徑＝圖片地址 圖片寬度＝250px 圖片高度＝250px 類型＝影像>二、向「左上」和「右上」斜著滾動分開的圖片代碼：<table border="0" width_="800" bgColor="#6495ed" height="400"><tbody><tr><td height="400" width_="400"><marquee direction="up" height="400" width_="400" scrollAmount="5"><marquee height="250" scrollAmount="5"><input 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" type="image" INPUT=""></marquee></marquee><td height="400" width_="400"><marquee direction="up" height="400" width_="400" scrollAmount="5"><marquee direction="right" height="250" scrollAmount="5"><input 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" type="image" INPUT=""></marquee></marquee></td></tr></tbody></table>代碼解析：1、上面的代碼中，設置了一個寬度為800px高度為400px的一行二列的表格，在表格的兩個單元格中，各放入了一個移動圖片，一個向「左上」移動，一個向「右上」移動。圖片的高度和寬度，設置為移動屏幕高度和寬度的二分之一左右為宜。2、單元格中的每個圖片，都是用兩個移動標籤控制。向「右上」移動的圖片，向「左上」移動的圖片，用「向上」移動和「向左」移動的移動標籤控制；用「向上」移動和「向右」移動的移動標籤控制。3、輸入標籤解析：<input 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" type="image" ><輸入標籤 css樣式＝「濾鏡：透明度（透明度等級＝100 也就是不透明，透明區域形狀＝2 也就是放射形）；」 圖片路徑＝圖片地址 圖片寬度＝250px 圖片高度＝250px 類型＝影像>4、在這裡，使用輸入標籤<input>與貼圖標籤<img>，效果是一樣的。

三、多圖片分割移動圖 代碼：<table border="0" cellSpacing="1" cellPadding="3" width_="650" height="210"><tbody><tr><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_2" height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_3" height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_4" height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_5" height="210"></marquee></td><td align="center"><marquee width_="120" scrollAmount="2" scrollDelay="100"><img title="春天沒來歡迎您" alt="春天沒來歡迎您" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/06/1315/24828273_6" height="210"></marquee></td></tr></tbody></table>代碼解析：1、設置了一個一行五列的表格，表格的每個單元格中放置了一個用移動標籤控制的圖片。2、表格的寬度不能小於各個圖片寬度之和，表格的高度與各圖片的高度要相等。效果圖:

作業：１、反覆閱讀上面的三種移動圖片代碼，思考各個代碼所表示的意義。２、應用上面的三種標籤，各製作一篇文章。要替換圖片的地址，其它內容自己試著替換一下，並觀察替換以後的效果。3、「多圖片分割移動圖代碼」適合製作小模塊，可以添加到圖書館首頁，也可以放置到文章中作為小插圖或者分割線使用。

2012年11 月6日於北京

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

本節繼續學習圖片的移動。下面講解圖片的四種移動標籤。要深刻領會標籤中的內容，學會應用這些移動標籤。展開再消失的圖片代碼1：<marquee direction="right" height="680" width_="475" scrollAmount="3"><marquee direction="left" height="680" width_="475" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg"></marquee></marquee>展開再消失的圖片代碼2：<marquee direction="left" height="680" width_="475" scrollAmount="3"><marquee direction="right" height="600" width_="475" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg"></marquee></marquee>展開再消失的圖片代碼3：<marquee direction="up" height="680" width_="475" scrollAmount="3"><marquee direction="down" height="680" width_="475" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg"></marquee></marquee>展開再消失的圖片代碼4：<marquee direction="down" height="680" width_="475" scrollAmount="3"><marquee direction="up" height="680" width_="475" scrollAmount="3"><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/3119/24512617_2.jpg"></marquee></marquee>代碼解析：上面的這四種移動圖片代碼，都是由兩個方向相反的移動標籤控制一個圖片。其效果是先展開，然後再消失。作業：應用上面的四種代碼，各製作一篇文章。製作時，替換圖片以後，最好把移動標籤中的寬度和高度修改得與你使用的圖片的寬度和高度相一致。也可以在圖片標籤中添加與移動標籤中相一致的寬度和高度值。添加的代碼為：style="width: 475px; height: 680px;" 其位置放置在圖片標籤名稱的後面，圖片地址的前面即可。代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)

２０1２年11月 6 日於北京
推薦閱讀：