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

時間 2019-11-12

標籤使用 javascript 建立一個響應全景圖片查看幻燈欄目 JavaScript 简体版

原文原文鏈接

日期：2012-3-26 來源：GBin1.comjavascript

在線演示本地下載css

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

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

如何實現？

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

代碼實現

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

1. 代碼文件

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

2. 新的項目

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

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

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

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

<!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. 添加互動

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

<!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>
        
        <script src="js/heartcode-canvasloader-min.js"></script>
        <script src="js/jquery-1.7.min.js"></script>
        <script src="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:-270px;
}
#threesixty_images {
        display: none;
}

6. 設置顯示

爲了幻燈針對不一樣的設備都能有完美顯示。咱們這裏添加media queries。使用max-device-width和orientataion屬性而且聯合使用and操做。

@media  screen and (max-device-width: 1024px) and (orientation:portrait) {
        #threesixty {
                width:720px;
                height:450px;
                margin-left:-360px;
                margin-top:-225px;
        }
}
@media  screen and (max-device-width: 480px) and (orientation:landscape),
                                screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
        #threesixty {
                width:360px;
                height:225px;
                margin-left:-180px;
                margin-top:-113px;
        }
}
@media  screen and (max-device-width: 480px) and (orientation:portrait),
                                screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {
        #threesixty {
                width:320px;
                height:200px;
                margin-left:-160px;
                margin-top:-100px;
        }
}

7. 圖片

全部的圖片都被存放在<ol>中。咱們不但願都顯示，因此定義current-image和previous-image來控制顯示。

#threesixty img {
        position:absolute;
        top:0;
        width:100%;
        height:auto;
}
.current-image {
        visibility:visible;
        width:100%;
}
.previous-image {
        visibility:hidden;
        width:0;
}

8. 預加載樣式

#spinner {
        position:absolute;
        left:50%;
        top:50%;
        width:90px;
        height:90px;
        margin-left:-45px;
        margin-top:-50px;
        display:none;
}
#spinner span {
        position:absolute;
        top:50%;
        width:100%;
        color:#333;
        font:0.8em Arial, Verdana, sans;
        text-align:center;
        line-height:0.6em;
        margin-top:-0.3em;
}

9. document準備處理

建立一個threesixty.js在js文件夾中。添加jQuery document ready方法。

拖放能夠告訴咱們用戶是否使用pointer。使用speedMultiplier咱們能夠設置圖片幻燈速度。同時咱們使用變量來保存pointer位置。timer將會跟蹤pointer變化。咱們定義變量來保存而且跟蹤變化來計算圖片加載。

$(document).ready(function () {
        var ready = false,
                        dragging = false,
                        pointerStartPosX = 0,
                        pointerEndPosX = 0,
                        pointerDistance = 0,
 
                        monitorStartTime = 0,
                        monitorInt = 10,
                        ticker = 0,
                        speedMultiplier = 10,
                        spinner,
        
                        totalFrames = 180,
                        currentFrame = 0,
                        frames = [],
                        endFrame = 0,
                        loadedImages = 0;
});

10. Spinner

咱們建立addSpinner方法來在#spinner中添加CanvasLoader實例。以下：

function addSpinner () {
        spinner = new CanvasLoader("spinner");
        spinner.setShape("spiral");
        spinner.setDiameter(90);
        spinner.setDensity(90);
        spinner.setRange(1);
        spinner.setSpeed(4);
        spinner.setColor("#333333");
        spinner.show();
        $("#spinner").fadeIn("slow");
};

11. 圖片加載和幀數組

加載圖片方法建立了包含<img>的<li>。 loadedimages變量生成圖片名字，每次圖片加載後自動添加，成功後，調用imageLoaded方法。

function loadImage() {
        var li = document.createElement("li");
        var imageName = "img/threesixty_" + (loadedImages + 1) + ".jpg";
        var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li);
        frames.push(image);
        $("#threesixty_images").append(li);
        $(image).load(function() {
                imageLoaded();
        });
};

12. 圖片過載

這裏加載的圖片太多，所以咱們循環調用loadImage。圖片加載處理將加載進度寫到#spiner <span>。一旦加載完畢，咱們將顯示第一個張圖片，而且加載進度條消失。

function imageLoaded() {
        loadedImages++;
        $("#spinner span").text(Math.floor(loadedImages / totalFrames * 100) + "%");
        if (loadedImages == totalFrames) {
                frames[0].removeClass("previous-image").addClass("current-image");
                $("#spinner").fadeOut("slow", function(){
                        spinner.hide();
                        showThreesixty();
                });
        } else {
                loadImage();
        }
};

13. 順暢的過渡效果

使用showThreesixty方法來順暢的顯示圖片幻燈過渡效果。

function imageLoaded() {
        loadedImages++;
        $("#spinner span").text(Math.floor(loadedImages / totalFrames * 100) + "%");
        if (loadedImages == totalFrames) {
                frames[0].removeClass("previous-image").addClass("current-image");
                $("#spinner").fadeOut("slow", function(){
                        spinner.hide();
                        showThreesixty();
                });
        } else {
                loadImage();
        }
};
 
function showThreesixty () {
        $("#threesixty_images").fadeIn("slow");
        ready = true;
};
 
addSpinner();
loadImage();

via netmagazine.com

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