文章目录

演示

以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章

代码说明

该功能需要使用到vanillasplit.js以及vanillaslider.css。css文件可以修改滑动块的相关样式。需要将上述两个文件以及sync.xml复制到根目录下。

下面是html的代码。

<html>

<head>
<title>Vanilla Slider - Local Test K - Variant A</title>
<link rel="stylesheet" href="vanillaslider.css">


</head>

<body>


<script src="tour.js"></script>




<div class="wrapper">

	<div class="viewersDiv">
			<div id="krpanoLeftDiv" draggable="false"></div>
	</div>
	
	<div class="viewersDiv after">	
			<div id="krpanoRightDiv" draggable="true"></div>
						<img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
	</div>
	
	<div class="scroller">
		<svg class="scroller__thumb" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
	</div>
	
</div>




<script>
   $(document).ready(function() {
       //Call a variable to know the width of the window
       var screenWidth = $(window).width();
       $('krpanoLeftDiv').css('width', screenWidth + 'px');
    });
</script>

<script>
	embedpano({html5:"only", id:"krpanoLeftViewer",  target:"krpanoLeftDiv",  xml:"AAAAA.xml", vars:{syncside:"left",syncviewer:"krpanoRightViewer"}, passQueryParameters:true});
	
	embedpano({html5:"only", id:"krpanoRightViewer", target:"krpanoRightDiv", xml:"BBBBB.xml", vars:{syncside:"right",syncviewer:"krpanoLeftViewer"}, passQueryParameters:true});
</script>|


<script src="vanillasplit.js"></script>



</body>

</html>

<html>

<head>

<title>Vanilla Slider - Local Test K - Variant A</title>

</head>

<body>

</div>

</div>

</div>

$(document).ready(function() {

//Call a variable to know the width of the window

var screenWidth = $(window).width();

$('krpanoLeftDiv').css('width', screenWidth + 'px');

});

</script>

embedpano({html5:"only", id:"krpanoLeftViewer", target:"krpanoLeftDiv", xml:"AAAAA.xml", vars:{syncside:"left",syncviewer:"krpanoRightViewer"}, passQueryParameters:true});

embedpano({html5:"only", id:"krpanoRightViewer", target:"krpanoRightDiv", xml:"BBBBB.xml", vars:{syncside:"right",syncviewer:"krpanoLeftViewer"}, passQueryParameters:true});

</script>|

</body>

</html>

script中两个embedpano函数分别对应着AAAAA和BBBBB两个xml。

再来看其中一个xml。

<krpano version="1.20.9" title="Virtual Tour">

<include url="sync.xml" />

	<!-- startup action - load the first scene -->
	<action name="startup" autorun="onstart">
		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
		loadscene(get(startscene));
		if(startactions !== null, startactions() );
	</action>

		
	<scene name="scene_BBBBB" title="BBBBB">
		
		<image>
			<cube url="panos/BBBBB.tiles/pano_%s.jpg" />
		</image>
		
		<view hlookat="9.0" vlookat="0.0" fovtype="MFOV" fov="110" maxpixelzoom="0" fovmin="110" fovmax="110" limitview="auto" />
		
                <area align="left" width="2500" height="1500" />

	</scene>


</krpano>

if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );

loadscene(get(startscene));

if(startactions !== null, startactions() );

</action>

<image>

</image>

</scene>

</krpano>

在这个xml需要嵌入sync.xml。

<include url="sync.xml" />

1	<include url="sync.xml" />

注意，在案例中使用的是cube标签作为图像代码，也即是立方体切片，这样加载速度较慢，可以采用正常的多分辨率切片方式。

我们可以使用droplet生成对应的两个image标签以及对应panos文件夹。

案例下载

链接：https://pan.baidu.com/s/1KD9LhcS1HBVgR6Ja8ZB7IQ
提取码：

以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章