亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript制作幻燈片（360度全景圖片）

 更新時間：2015年07月28日 10:30:02   作者：super1234  
這篇文章主要介紹了應(yīng)用javascript制作幻燈片（360度全景圖片），在做產(chǎn)品演示時，經(jīng)常會用到幻燈片，這里我給大家整理了一款非常不錯的的360度全景幻燈片實(shí)現(xiàn)教程,需要的朋友可以參考下

在給客戶做產(chǎn)品演示時經(jīng)常會用到幻燈片，擁有360度的全景圖片效果給用戶帶來好的體驗(yàn)價值。在這里給大家介紹一款來自Robert Pataki的360全景幻燈實(shí)現(xiàn)教程，此款教程使用js來實(shí)現(xiàn)一個超酷的全景幻燈，具體內(nèi)容如下：

在這個教程中沒有使用到任何插件，我們將使用HTML，css和javascript來實(shí)現(xiàn)，當(dāng)然，也使用是jQuery這個框架！

如何實(shí)現(xiàn)？

我們將使用預(yù)先按照360生成的圖片進(jìn)行輪播來實(shí)現(xiàn)動畫展示效果。包含了180個圖片。所以加載時間可能比較長。

代碼實(shí)現(xiàn)

我們將在css代碼中添加media queries，來使得這個效果可以同時在ipad和iphone上實(shí)現(xiàn)。

1. 代碼文件

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

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

2.  新的項(xiàng)目

創(chuàng)建一個HTML文件index.html。在<head>中我們設(shè)置了移動設(shè)備的viewport，使得內(nèi)容不支持縮放。添加倆個文件

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. 加載進(jìn)度條

創(chuàng)建一個<div>來容納幻燈。其中包含一個<ol>，用來包含圖片序列<li>，同時也包含了一個<span>來顯示進(jìn)度條。我們將使用javascript來動態(tài)加載圖片。

<!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用來設(shè)置缺省的樣式。首先定義#threesixty包裝。缺省的圖片幻燈是960x450。水平垂直居中。

#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p

以上內(nèi)容就是應(yīng)用javascript制作幻燈片的全部內(nèi)容，希望大家喜歡。

相關(guān)文章

最新評論