[JavaScript案例]360度全景照片

Posted 2020-09-04 小碎石

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[JavaScript案例]360度全景照片相关的知识，希望对你有一定的参考价值。

案例: 360度全景照片鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转，从而呈现360度物体旋转效果

思路: 将所有的图片都放入指定容器内，通过切换相应的照片隐藏与显示来实现旋转效果

代码:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>Document</title>
        <script type="text/javascript" src="360.js"></script>
    </head>
    <body>
        <div class="container" id="page750">
            <img src="img/1.png">
        </div>
    </body>
</html>

html,body{
    margin: 0;
    padding: 0;
}
.container{
    display: flex;
}
img{
    display: block;
    margin: auto;
}

window.onload = function(){
    var container = document.getElementById("page750");
    /*
        一次性将所有的图片标签加入
     */
    var imgCount = 40;
    var lastStartX = 0;
    var iSpeed = 0;
    var timer;
    var _disX;
    for(var i = 2; i <= imgCount; i++){
        (function(i){
            var img = new Image();
            var imgNode = document.createElement("img");
            img.onload = function(){
                imgNode.src = this.src;
                imgNode.style.display = "none";
                container.appendChild(imgNode);
            };
            img.src = "img/"+i+".png";}
        )(i);
    }
    var imgNodes = container.getElementsByTagName("img");
    var lastImgNode = container.getElementsByTagName("img")[0];

    var startX = 0;
    function mouseDownHandler(event){
        console.log("mouse down");
        clearInterval(timer);
        startX = event.clientX;
        document.addEventListener("mousemove", mouseMoveHandler);
        document.addEventListener("mouseup", mouseUpHandler);
        return false;
    }
    function mouseMoveHandler(event){
        console.log("mouse move");
        disX = event.clientX - startX;
        move();
        iSpeed = _disX - lastStartX;
        lastStartX = _disX;
        document.title = _disX;
        return false;
    }
    function mouseUpHandler(event){
        console.log("mouse up");
        document.removeEventListener("mousemove", mouseMoveHandler);
        document.removeEventListener("mouseup", mouseUpHandler);
        document.title = iSpeed;
        timer = setInterval(function(){
            if(iSpeed>0){
                iSpeed--;
            }else{
                iSpeed++;
            }
            if(iSpeed==0){
                clearInterval(timer);
            }
            disX += iSpeed;
            move();
        }, 20);
    }
    function move(){
        _disX = parseInt(disX/20);
        if(_disX>0){
            _disX = disX%imgCount;
        }else{
            _disX = disX - Math.floor(disX/imgCount)*imgCount;
        }
        if(lastImgNode != imgNodes[_disX]){
            lastImgNode.style.display = "none";
            imgNodes[_disX].style.display = "block";
            lastImgNode = imgNodes[_disX];
        }
    }
    document.addEventListener("mousedown", mouseDownHandler);
};

以上是关于[JavaScript案例]360度全景照片的主要内容，如果未能解决你的问题，请参考以下文章

怎么做360度全景图？

360全景照片拍摄方式及注意事项

VR 全景全景智慧城市对创业者，企业转型有哪些帮助

如何将 Theta 360 度照片发布到 Facebook

三百六十度全景图如何拍摄？

如何在 iOS 中将 Theta 360 度照片发布到 Facebook