DIV CSS 佈局教程網

網頁上欣賞到360度的全景照片是一件很有趣的事，不要擔心制作過程會很復雜，我們在這裡介紹一種最簡單的方法，同樣可以達到效果，學起來很容易，只要會一點點html和css的基本語法就足夠了。
　
注意：這個效果只有用IE浏覽器才能看到。下面我們來看看整個的制作過程：

第一步：准備一張全景圖片。

您可以自己拍也可以從網上下載。當然如果您攝影技術足夠高的話我還是建議你自己拍一張（題材如家庭居室的全景等），這樣顯得更加生動一些；如果你和我一樣是個攝影菜鳥，那麼還是在網上找一幅吧，如果也不是那麼好找，我這裡提供給你兩幅照片

前者是一個棒球場的全景，後者是一個辦公室的全景，圖片名稱分別是yl-020315-3d.jpg和yl-020315-3d2.jpg。

第二步：做一個表格存放圖片

用Dreamweaver等網頁制作軟件做一個1行2列的表格，以便在左邊的單元格內放置滾動的文字說明，右邊的單元格放置全景圖片。在表格屬性中作如下設置：border="0" cellspacing="0" cellpadding="0" height="150" width="220"，注意高度和所選的全景圖片一致；左側單元格寬度為20，右側為200；為表格做個邊框，我們可以利用css定義：style="border:#333366 3 double"，即邊框顏色采用#333366，寬度為3，線形為雙線。

然後我們再給兩個單元格中間設置分界線，即對左側單元格使用樣式：style="border-right:#333366 3 double"，顏色線型和表格外框一致；接著將左側單元格的背景色設置為#333366，把右側單元格的背景設置為yl-020315-3d.jpg，即作成如下模樣：

第三步：使全景圖片移動

要使圖片移動的方法很多，如用Dreamweaver的層和時間線，用javascript，甚至可以用java applet,不過我們這裡用簡單的：marquee。

我們先了解一下marquee的主要參數：

bgcolor 背景顏色，可輸入顏色的英文名稱或者16進制代碼等；
direction=left|right|up|down 滾動方向（左|右|上|下）
behavior=scroll|slide|alternate scroll表示由一端滾動到另一端；
slide表示由一端快速滑動到另一端，不再重復；
alternate表示在兩端之間來回滾動；
height＝數值 滾動區域的高度；
width=數值 滾動區域的寬度；
scrollamount=數值 決定滾動的速度，數值越大滾動越快；
Scrolldelay=數值 延遲時間，數值越大跳躍越明顯；
loop＝數值 循環次數，不設置該值即表示無限循環。

注意，marquee不僅可以使文字滾動，也可以使圖片滾動，只要在<marquee>和</marquee>間插入<img src=url>就可以了。下面我們就把全景圖片插入到右側的單元格中，代碼如下：

<td background="yl-020315-3d.jpg">
<marquee behavior=scroll direction=left width=200 height=150 scrollamount=2 scrolldelay=0>
<img src="yl-020315-3d.jpg" width="800" height="150">
</marquee>
</td>
然後我們對它添加一些行為：

onClick="this.start()" 當鼠標點擊時開始播放；
onMouseOver="this.stop()" 當鼠標移入時停止播放；
onMouseOut="this.start()" 當鼠標移出時繼續播放。

另外，我們還可以加上標題：style="title:標題內容"；改變鼠標式樣：style="cursor:hand"等，全部代碼如下：

<td background="yl-020315-3d.jpg" title="360全景圖單擊開始播放">
<marquee style="cursor:hand" behavior=scroll direction=left width=200 height=150 scrollamount=2 scrolldelay=0 onClick='this.start()' onMouseOver='this.stop()' onMouseOut='this.start()'>
<img src="yl-020315-3d.jpg" width="800" height="150">
</marquee>
</td>

如果你細心的話會發現圖片滾動時頭尾對接不上，解決的辦法是在插入圖片的地方重復多插幾次圖片，或者使用一點javascript語句讓圖片循環滾動。

<script language=javascript>
　fo