首頁 >web前端 >js教程 >javascript製作投影片（360度全景圖片）_表單特效

javascript製作投影片（360度全景圖片）_表單特效

WBOY原創: 2016-05-16 15:48:391822瀏覽

在為客戶做產品簡報時常會用到投影片，擁有360度的全景圖片效果帶給使用者好的體驗價值。在這裡為大家介紹一款來自Robert Pataki的360全景幻燈實現教程，此款教程使用js來實現一個超酷的全景幻燈，具體內容如下：

在這個教程中沒有使用到任何插件，我們將使用HTML，css和javascript來實現，當然，也使用是jQuery這個框架！

如何實現？

我們將使用預先按照360產生的圖片進行輪播來實現動畫展示效果。包含了180張圖片。所以載入時間可能比較長。

程式碼實作

我們將在css程式碼中加入media queries，來使得這個效果可以同時在ipad和iphone上實現。

1. 程式碼檔案

我們加js，css，圖片目錄。 css目錄中包含了reset.css。 js中包含了jQuery。程式碼檔案如下：

javascript製作投影片（360度全景圖片）_表單特效

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. 載入進度條

建立一個

來容納幻燈。其中包含一個

，同時也包含了一個來顯示進度條。我們將使用javascript來動態載入圖片。

<!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製作投影片的全部內容，希望大家喜歡。

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用Browserify配合jQuery進行程式設計的超級指南_jquery下一篇：使用Browserify配合jQuery進行程式設計的超級指南_jquery

看更多

javascript製作投影片（360度全景圖片）_表單特效

相關文章