在為客戶做產品簡報時常會用到投影片，擁有360度的全景圖片效果帶給使用者好的體驗價值。在這裡為大家介紹一款來自Robert Pataki的360全景幻燈實現教程，此款教程使用js來實現一個超酷的全景幻燈，具體內容如下：
在這個教程中沒有使用到任何插件，我們將使用HTML，css和javascript來實現，當然，也使用是jQuery這個框架！
如何實現？
我們將使用預先按照360產生的圖片進行輪播來實現動畫展示效果。包含了180張圖片。所以載入時間可能比較長。
程式碼實作
我們將在css程式碼中加入media queries，來使得這個效果可以同時在ipad和iphone上實現。
1. 程式碼檔案
我們加js，css，圖片目錄。 css目錄中包含了reset.css。 js中包含了jQuery。程式碼檔案如下：
2. 新的項目
建立一個HTML檔案index.html。在
中我們設定了行動裝置的viewport，使得內容不支援縮放。新增兩個檔案reset.css和threesixty.css。包含了自訂的css樣式。
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> </body> </html>
3. 載入進度條
建立一個
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> </body> </html>
4. 增加互動
程式碼最後，我們加入jQuery用來處理互動，threesixity.js用來處理圖片幻燈。
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> <scriptsrc="js/heartcode-canvasloader-min.js"></script> <scriptsrc="js/jquery-1.7.min.js"></script> <scriptsrc="js/threesixty.js"></script> </body> </html>
5. 樣式
我們新增threesixty.css檔案。 reset.css用來設定預設的樣式。首先定義#threesixty包裝。缺省的圖片幻燈是960x450。水平垂直居中。
#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p
以上內容就是應用javascript製作投影片的全部內容，希望大家喜歡。
