使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
生活随笔
收集整理的這篇文章主要介紹了
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在線演示??本地下載
360度的全景圖片效果常常可以用到給客戶做產(chǎn)品展示，今天這里我們推薦一個非常不錯的來自Robert Pataki的360全景幻燈實現(xiàn)教程，這里教程中將使用javascript來打造一個超酷的全景幻燈實現(xiàn)，相信大家一定會喜歡的！
在這個教程中沒有使用到任何插件，我們將使用HTML，css和javascript來實現(xiàn)，當然，也使用是jQuery這個框架！
如何實現(xiàn)？
我們將使用預先按照360生成的圖片進行輪播來實現(xiàn)動畫展示效果。包含了180個圖片。所以加載時間可能比較長。
代碼實現(xiàn)
我們將在css代碼中添加media queries，來使得這個效果可以同時在ipad和iphone上實現(xiàn)。
1. 代碼文件
我們添加js，css，圖片目錄。css目錄中包含了reset.css。js中包含了jQuery。代碼文件如下：
2.? 新的項目
創(chuàng)建一個HTML文件index.html。在<head>中我們設置了移動設備的viewport，使得內(nèi)容不支持縮放。添加倆個文件
reset.css和threesixty.css。包含了自定義的css樣式。
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" /><title>360</title><link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" /><link rel="stylesheet" href="css/threesixty.css" media="screen" type="text/css" /> </head> <body></body> </html>3. 加載進度條
創(chuàng)建一個<div>來容納幻燈。其中包含一個<ol>，用來包含圖片序列<li>，同時也包含了一個<span>來顯示進度條。我們將使用javascript來動態(tài)加載圖片。
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" /><title>360</title><link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" /><link rel="stylesheet" href="css/threesixty.css" media="screen" type="text/css" /> </head> <body><div id="threesixty"><div id="spinner"><span>0%</span></div><ol id="threesixty_images"></ol></div> </body> </html>4. 添加互動
原文地址：http://www.gbtags.com/technology/jquerytutorial/20120326slider360viewimage/
總結(jié)
以上是生活随笔為你收集整理的使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu 4193(单调队列)
- 下一篇： 利用自定义的 ClassLoader 加