thank you for reading my question !
right now , i am tryting to make a tour through html& css.
i made it possible to move from TOP menu, and also i made wrapped Scence 001, Scence02 in div to make a layer, but it's not moving. so is there anything i can do ?
please check the LINK down below
thank you
link
here
Code
<head>
<style>
*{margin:0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none;}
/*header*/
header{ background-color: blue;}
.top_navi {background-color: #ff3333; overflow: hidden; text-align: center;}
.top_navi li{float: left; width: 25%; height: 40px; line-height: 40px;}
.top_navi li a{color:#fff;}
.bottom_navi { text-align: center; height: 40px; line-height: 40px; background:blue;}
.bottom_navi li {float: left; width: 20%}
.bottom_navi li a { color: #fff; }#pano{ position: absolute; width:100%;height: 100%;}
.lilist {position: absolute; bottom: 10px; width: 300px; height: 50px; background-color: rgba(33,33,33, 0.5);line-height: 50px;}
.lilist li {float: left; width: 50%; color: #fff; text-align: center;}
.lilist li a {color: #fff;}
</style>
</head>
<body>
<header> <nav>
<ul class="top_navi">
<li onclick="goscene('scene_001');"><a href="#">Top_Menu</a></li>
<li onclick="goscene('scene_002');"><a href="#" ">Top_Menu</a></li>
<li><a href="#">Top_Menu</a></li>
<li><a href="#">Top_Menu</a></li>
</ul>
<ul class="bottom_navi">
<li onclick="goscene('scene_001');"><a href="#">Bottom Menu</a></li>
<li onclick="goscene('scene_002');"><a href="#" ">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
</ul>
</nav></header>
<!-- VR-CONTENTS -->
<div id="pano" style="width:100%; height: calc(100% - 80px); border:0.1px solid gray;">
</div>
<div class="lilist">
<ul class="snb">
<li onclick="goscene('scene_001');"><a href="">Scene001</a></li>
<li onclick="goscene('scene_002');"><a href="">Scene002</a></li>
</ul>
</div>
<script src="tour.js"></script>
<!-- <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript> -->
<script> embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true,onready : krpano_onready_callback});
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
}
function goscene(scene)
{
if (krpano)
{
krpano.call("loadscene("+ scene +", null, MERGE, BLEND(0.5));");
}
}
</script></div>
</body>
</html>
Alles anzeigen