|
網(wǎng)頁上欣賞到360度的全景照片是一件很有趣的事，不要擔心制作過程會很復雜，我們在這里介紹一種最簡單的方法，同樣可以達到效果，學起來很容易，只要會一點點html和css的基本語法就足夠了。
注意：這個效果只有用IE瀏覽器才能看到。下面我們來看看整個的制作過程：
第一步：準備一張全景圖片。
您可以自己拍也可以從網(wǎng)上下載。當然如果您攝影技術(shù)足夠高的話我還是建議你自己拍一張（題材如家庭居室的全景等），這樣顯得更加生動一些；如果你和我一樣是個攝影菜鳥，那么還是在網(wǎng)上找一幅吧，如果也不是那么好找，我這里提供給你兩幅照片：
前者是一個棒球場的全景，后者是一個辦公室的全景，圖片名稱分別是yl-020315-3d.jpg和yl-020315-3d2.jpg。
第二步：做一個表格存放圖片
用Dreamweaver等網(wǎng)頁制作軟件做一個1行2列的表格，以便在左邊的單元格內(nèi)放置滾動的文字說明，右邊的單元格放置全景圖片。在表格屬性中作如下設(shè)置：border="0" cellspacing="0" cellpadding="0" height="150" width="220"，注意高度和所選的全景圖片一致；左側(cè)單元格寬度為20，右側(cè)為200；為表格做個邊框，我們可以利用css定義：style="border:#333366 3 double"，即邊框顏色采用#333366，寬度為3，線形為雙線。
然后我們再給兩個單元格中間設(shè)置分界線，即對左側(cè)單元格使用樣式：style="border-right:#333366 3 double"，顏色線型和表格外框一致；接著將左側(cè)單元格的背景色設(shè)置為#333366，把右側(cè)單元格的背景設(shè)置為yl-020315-3d.jpg，即作成如下模樣：
第三步：使全景圖片移動
要使圖片移動的方法很多，如用Dreamweaver的層和時間線，用javascript，甚至可以用java applet,不過我們這里用簡單的：marquee。
我們先了解一下marquee的主要參數(shù)：
bgcolor 背景顏色，可輸入顏色的英文名稱或者16進制代碼等；
direction=left|right|up|down 滾動方向（左|右|上|下）
behavior=scroll|slide|alternate scroll表示由一端滾動到另一端；
slide表示由一端快速滑動到另一端，不再重復；
alternate表示在兩端之間來回滾動；
height＝數(shù)值 滾動區(qū)域的高度；
width=數(shù)值 滾動區(qū)域的寬度；
scrollamount=數(shù)值 決定滾動的速度，數(shù)值越大滾動越快；
Scrolldelay=數(shù)值 延遲時間，數(shù)值越大跳躍越明顯；
loop＝數(shù)值 循環(huán)次數(shù)，不設(shè)置該值即表示無限循環(huán)。
注意，marquee不僅可以使文字滾動，也可以使圖片滾動，只要在<marquee>和</marquee>間插入<img src=url>就可以了。下面我們就把全景圖片插入到右側(cè)的單元格中，代碼如下：
<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()" 當鼠標移出時繼續(xù)播放。
另外，我們還可以加上標題：style="title:標題內(nèi)容"；改變鼠標式樣：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>
如果你細心的話會發(fā)現(xiàn)圖片滾動時頭尾對接不上，解決的辦法是在插入圖片的地方重復多插幾次圖片，或者使用一點javascript語句讓圖片循環(huán)滾動。
<script language=javascript>
for(t=1;t<=1000;t++)
document.write("<img src=3d.jpg width=906 height=143>"
</script>
第四步：制作滾動的文字說明
制作滾動文字對大家來說是家常便飯，至于怎樣把文字豎排也不難，只要加上如下樣式：style="writing-mode:tb-rl"即可，其中tb表示top-bottom，rl表示right-left。代碼如下：
<td bgcolor="#333366" style="border-right:#333366 3 double">
<marquee style="cursor:hand" behavior=scroll direction=right width=20 height=150 scrollamount=1 scrolldelay=0 onmouseover='this.stop()' onmouseout='this.start()'>
<font style="margin-top:20;writing-mode:tb-rl;font-size:9pt" face="楷體_GB2312" color="#ffffff">
全景效果圖<br> <br>
三百六十度<br> <br>
全方位展示畫面<br> <br>
樂趣多多！<br> <br>
xxxx制作</font>
</marquee>
</td>
出處：藍色理想
責任編輯：panliu888
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
