DW MX 设计360度全景滚动效果图

网页上观赏到360度的全景像片是一件很风趣的事，不要担忧创造进程会很搀杂，咱们在这边引见一种最大略的本领，同样不妨到达功效，学起来很简单，只有会一点点html和css的基础语法就充满了。提防：这个功效只有效ie欣赏器本领看到。底下咱们来看看所有的创造进程：第一步：筹备一张全景图片。您不妨本人拍也不妨从网左右载。固然即使您拍照本领充满高的话我仍旧倡导你本人拍一张（体裁如家园居室的全景等），如许显得越发灵巧少许；即使你和我一律是个拍照菜鸟，那么仍旧在网上找一幅吧，即使也不是那么好找，我这边供给给你两幅像片：

前者是一个棒溜冰场的全景，后者是一个接待室的全景，图片称呼辨别是http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/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，把右侧单位格的后台树立为http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/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="http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/3d.jpg"><marquee behavior=scroll direction=left width=200 height=150 scrollamount=2 scrolldelay=0><img src="http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/3d.jpg" width="800" height="150"></marquee></td> 而后咱们对它增添少许动作：onclick="this.start()" 当鼠圈点击时发端播放； onmouseover="this.stop()" 当鼠标移时髦遏止播放； onmouseout="this.start()" 当鼠标移出时连接播放。其余，咱们还不妨加上题目：style="title:题目实质"；变换鼠标格局：style="cursor:hand"等，十足代码如次：<td background="http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/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="http://www.okasp.com/techinfo/yl-020315-http://www.okasp.com/techinfo/3d.jpg" width="800" height="150"></marquee></td> 即使你经心的话会创造图片震动时头尾对接不上，处置的方法是在插入图片的场合反复多插几次图片，大概运用一点javascript语句让图片轮回震动。<script language=javascript>for(t=1;t<=1000;t++)document.write("<img src=http://www.okasp.com/techinfo/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>