html怎么做360度全景图

想要在网页中实现360度全景图效果，其实并不复杂，只需掌握一定的HTML、CSS和JavaScript知识，你就可以轻松创建出令人惊叹的全景图，下面我将详细介绍如何制作360度全景图，让你一步步掌握这项技能。

准备全景图片

你需要一张全景图片，这类图片通常有很高的像素，可以展现出360度无死角的场景，你可以使用专业的全景相机拍摄，或者使用手机上的全景模式拍摄，注意，图片的分辨率越高，全景效果越好，但文件大小也会更大。

创建HTML文件

我们开始编写HTML代码，首先创建一个HTML文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360度全景图</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="panorama" class="panorama"></div>
    <script src="script.js"></script>
</body>
</html>

编写CSS样式

创建一个名为styles.css的CSS文件，并在文件中添加以下代码：

html怎么做360度全景图

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
.panorama {
    width: 100%;
    height: 100%;
    background-image: url('path/to/your/panorama.jpg'); /* 替换为你的全景图片路径 */
    background-size: cover;
    background-position: center;
    perspective: 1000px;
    position: relative;
}

这里需要注意的是，background-image的路径要替换为你的全景图片路径。

编写JavaScript代码

创建一个名为script.js的JavaScript文件，并在文件中添加以下代码：

window.addEventListener('load', function () {
    var panorama = document.getElementById('panorama');
    var startX = 0;
    var startY = 0;
    var moveX = 0;
    var moveY = 0;
    var rotateY = 0;
    var rotateX = 0;
    panorama.addEventListener('mousedown', function (e) {
        startX = e.clientX;
        startY = e.clientY;
        this.addEventListener('mousemove', move);
        document.addEventListener('mouseup', stopMove);
    });
    function move(e) {
        moveX = e.clientX - startX;
        moveY = e.clientY - startY;
        rotateY += moveX * 0.2;
        rotateX -= moveY * 0.2;
        panorama.style.transform = 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
        startX = e.clientX;
        startY = e.clientY;
    }
    function stopMove() {
        panorama.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stopMove);
    }
});

这段代码的作用是监听鼠标事件，根据鼠标的移动来旋转全景图，从而实现360度全景效果。