Pannellum：实例之通过全景图游览
江佐
使用 添加hotSpots参数并对其设置,可以对全景图片添加热点.
效果:游览
代码:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author"content=“KaiSarH,huankai7@163.com”>
<title>Custom controls</title>
<link rel="stylesheet" href="pannellum.css"/>
<script type="text/javascript" src="pannellum.js"></script>
<style>
#panorama {
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"default": {
"firstScene": "circle",
"author": "KaiSarH",
// 设置切换持续时间
"sceneFadeDuration": 3000
},
"scenes": {
"circle": {
"title": "Mason Circle",
"hfov": 110,
"pitch": -3,
"yaw": 117,
"type": "equirectangular",
"panorama": "test/test.jpg",
"hotSpots": [
{
"pitch": -2.1,
"yaw": 132.9,
"type": "scene",
"text": "Spring House or Dairy",
"sceneId": "house"
}
]
},
"house": {
"title": "Spring House or Dairy",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": "test/test1.png",
"hotSpots": [
{
"pitch": -0.6,
"yaw": 37.1,
"type": "scene",
"text": "Mason Circle",
"sceneId": "circle",
"targetYaw": -23,
"targetPitch": 2
}
]
}
}
});
</script>
</body>
</html>
总结:
classList.add增加class
appendChild向节点的子节点列表的末尾添加新的子节点
createElement() 方法通过指定名称创建一个元素
类似资料：