<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全景图</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏或者设置状态栏的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 禁止缓存访问页面-->
<meta http-equiv="Pragma" content="no-cache">
<!-- 页面关键词-->
<meta name="applicable-device" content="mobile">
<style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; border: 0; outline: 0; } .main { position: relative; width: 100%; height: 100vh; margin: 0 auto; z-index: 1; cursor: move; } .main h3 { position: absolute; top: 10px; left: calc(50% - 75px); width: 150px; height: 40px; line-height: 40px; text-align: center; opacity: 0; z-index: 10; animation: myopacity 5s ease-in 1; -webkit-animation: myopacity 5s ease-in 1; } .logo { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin-left: -28px; margin-top: -28px; transition: opacity 1s ease-out 0s; background-color: rgba(0, 0, 0, 0.5); border-radius: 100%; opacity: 0; z-index: 100; user-select: none; animation: myopacity 5s ease-in 1; -webkit-animation: myopacity 5s ease-in 1; } .logo-gif { width: 48px; height: 48px; margin-left: 4px; margin-top: 4px; } @keyframes myopacity { from { opacity: 1;} to { opacity: 0;} } @-webkit-keyframes myopacity { from { opacity: 1;} to { opacity: 0;} } </style>
<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>
</head>
<body>
<div class="main">
<h3 id="title">鼠标拖拽查看全景</h3>
<div class="logo">
<img class="logo-gif" src="https://i.loli.net/2018/09/08/5b93c02aa563f.gif" />
</div>
<div id="container"></div>
</div>
<div id="container"></div>
<script> window.onload = function () { getTitleHeight(); loadingAllImg(); } //让全景图刚好撑满屏幕 var canvasHeight = 0; function getTitleHeight() { var maxHeight = window.innerHeight; canvasHeight = maxHeight + 'px'; } //全景图参数配置函数 function loadingAllImg() { var div = document.getElementById('container'); var PSV = new PhotoSphereViewer({ // 全景图的完整路径 panorama: 'quanjing1.jpg', // 放全景图的元素 container: div, // 可选，默认值为2000，全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它） time_anim: 0, // 可选值，默认为false。显示导航条。 navbar: true, // 可选，默认值null，全景图容器的最终尺寸。例如：{width: 500, height: 300}。 size: { width: '100%', height: canvasHeight } }); } </script>
</body>
</html>
时间: 2020-09-19｜41次围观｜0 条评论
还没有人抢沙发呢~