今年最火的全景照片，在網上隨處可見，想要制作一張屬于自己的720全景照片，javascript無疑是你不能錯過的工具。

所謂的720度全景圖其實就是一張可以在水平和豎直方向上自由拖動的圖片，它可以是一個圓形圖，也可以是一個平面的全景圖，下面就讓我們通過簡單的代碼實例來掌握javascript720度組件的制作方法。

//引入720度全景圖的js文件
<script src="js/threesixty.js"></script>
//創建全景容器對象
var panoconfig = {
id: 'pano-container',//容器id
imgArr: ['./img/bg1.jpg','./img/bg2.jpg','./img/bg3.jpg'],//圖片路徑
speed:'1',//滑動速度，默認為1
imgheight:'600px',//容器高度，默認為360px
initborder:false//容器移動邊界，默認為true
};
var pane = new Pano360(panoconfig);
pane.run();

上述的代碼中我們通過引入720度全景圖js文件和容器高度等參數的設置，就可以創建一個可以實現全景圖自由拖動的頁面。具體來說，其中id指定了容器的id，imgArr則是我們需要在全景圖中展現的圖片。

如果你想給全景圖中加入更多的互動性，可以嘗試通過添加鼠標事件來實現。例如下面的代碼就添加了一個鼠標滾輪事件。

//給容器添加鼠標滾輪事件
document.getElementById('pano-container').addEventListener('mousewheel', function(evt){
//如果你需要阻止全局的滾動事件，則使用如下代碼
evt.preventDefault();
//獲取事件滾動方向，支持Firefox和Chrome
var delta=evt.detail? evt.detail>0 : evt.wheelDelta<0;
if (delta) {
//向下
} else {
//向上
} 
});

通過上面代碼中的addEventListener函數，我們可以為全景容器添加一個鼠標滾輪事件，通過判斷滾動的上下方向和delta的正負，就可以實現全景圖在鼠標滾輪的各種操作下的相應動作。

總的來說，javascript是實現720度全景圖的一個方便、快捷且高效的工具。只需要設置好參數，編寫簡單的邏輯代碼，就可以創建出屬于自己的全景圖。