使用Javascript來建立一個響應式的超酷360度全景圖片查看幻燈效果

時間  2019-11-06
標籤 使用 javascript 建立 一個 響應 全景 圖片 查看 幻燈 效果 欄目 JavaScript 简体版
原文   原文鏈接

360度的全景圖片效果經常能夠用到給客戶作產品展現，今天這裏咱們推薦一個很是不錯的來自Robert Pataki的360全景幻燈實現教程，這裏教程中將使用javascript來打造一個超酷的全景幻燈實現，相信你們必定會喜歡的！javascript

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

如何實現？

咱們將使用預先按照360生成的圖片進行輪播來實現動畫展現效果。包含了180個圖片。因此加載時間可能比較長。html

代碼實現

咱們將在css代碼中添加media queries，來使得這個效果能夠同時在ipad和iphone上實現。java

1. 代碼文件

咱們添加js，css，圖片目錄。css目錄中包含了reset.css。js中包含了jQuery。代碼文件以下：jquery

360度全景圖片查看幻燈效果

2.  新的項目

建立一個HTML文件index.html。在<head>中咱們設置了移動設備的viewport，使得內容不支持縮放。添加倆個文件canvas

reset.css和threesixty.css。包含了自定義的css樣式。框架

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. </body>
  12. </html>

 

3. 加載進度條

建立一個<div>來容納幻燈。其中包含一個<ol>，用來包含圖片序列<li>，同時也包含了一個<span>來顯示進度條。咱們將使用javascript來動態加載圖片。iphone

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. <divid="threesixty">
  12. <divid="spinner">
  13. <span>0%</span>
  14. </div>
  15. <olid="threesixty_images"></ol>
  16. </div>
  17. </body>
  18. </html>
 

 

4. 添加互動

代碼最後，咱們添加jQuery用來處理互動，threesixity.js用來處理圖片幻燈。jsp

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
  6. <title>360</title>
  7. <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
  8. <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
  9. </head>
  10. <body>
  11. <divid="threesixty">
  12. <divid="spinner">
  13. <span>0%</span>
  14. </div>
  15. <olid="threesixty_images"></ol>
  16. </div>
  17. <scriptsrc="js/heartcode-canvasloader-min.js"></script>
  18. <scriptsrc="js/jquery-1.7.min.js"></script>
  19. <scriptsrc="js/threesixty.js"></script>
  20. </body>
  21. </html>

 

5. 樣式

咱們添加threesixty.css文件。reset.css用來設置缺省的樣式。首先定義#threesixty包裝。缺省的圖片幻燈是960x450。水平垂直居中。動畫

  1. #threesixty {
  2. position:absolute;
  3. overflow:hidden;
  4. top:50%;
  5. left:50%;
  6. width:960px;
  7. height:540px;
  8. margin-left:-480px;
  9. margin-top:-270p
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程