238 lines
5.9 KiB
HTML
238 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>场景订货-e订通</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
|
|
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css">
|
|
<link rel="stylesheet" href="css/pannellum.css">
|
|
<script src="layuiadmin/layui/layui.js"></script>
|
|
<script src="js/function.js"></script>
|
|
<script src="js/universal/universal.js"></script>
|
|
<script type="text/javascript" src="js/pannellum.js"></script>
|
|
<style>
|
|
#panorama {
|
|
width: 100%;
|
|
/* height: 400px; */
|
|
}
|
|
.list {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 30px;
|
|
z-index: 9;
|
|
}
|
|
#panorama-list {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 90%;
|
|
z-index: 9;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
#panorama-list>a {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0 8px;
|
|
text-align: center;
|
|
}
|
|
#panorama-list>a:first-child {
|
|
margin-left: 16px;
|
|
}
|
|
#panorama-list>a:last-child {
|
|
margin-right: 16px;
|
|
}
|
|
#panorama-list>a:not(.active) {
|
|
cursor: pointer;
|
|
}
|
|
#panorama-list img {
|
|
width: 100px;
|
|
}
|
|
#panorama-list-switch {
|
|
width: 10%;
|
|
height: 67px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
}
|
|
#panorama-list-switch>a {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
#panorama-list-switch i {
|
|
font-size: 30px;
|
|
color: white;
|
|
}
|
|
div.pnlm-tooltip span{
|
|
visibility:visible;
|
|
}
|
|
/* 列表展开与回收动画 */
|
|
.animation-unfold-to-right {
|
|
animation: unfold-to-right 500ms linear 0s 1 normal forwards;
|
|
-moz-animation: unfold-to-right 500ms linear 0s 1 normal forwards;
|
|
-webkit-animation: unfold-to-right 500ms linear 0s 1 normal forwards;
|
|
-o-aniamtion: unfold-to-right 500ms linear 0s 1 normal forwards;
|
|
}
|
|
.animation-unfold-to-right-reverse {
|
|
animation: unfold-to-right 500ms linear 0s 1 reverse forwards;
|
|
-moz-animation: unfold-to-right 500ms linear 0s 1 reverse forwards;
|
|
-webkit-animation: unfold-to-right 500ms linear 0s 1 reverse forwards;
|
|
-o-aniamtion: unfold-to-right 500ms linear 0s 1 reverse forwards;
|
|
}
|
|
@keyframes unfold-to-right {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 90%;
|
|
}
|
|
}
|
|
@keyframes recycle-from-right {
|
|
0% {
|
|
width: 90%;
|
|
}
|
|
100% {
|
|
width: 0%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="panorama">
|
|
|
|
</div>
|
|
<div class="list">
|
|
<div id="panorama-list-switch">
|
|
<a href="javascript: togglePanoramaList();">
|
|
<i class="layui-icon"></i>
|
|
</a>
|
|
</div><div id="panorama-list" style="display: none;">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var viewShow;
|
|
|
|
layui.use(['form','layer'],function(){
|
|
var form = layui.form,
|
|
layer = layui.layer,
|
|
$=layui.jquery;
|
|
var face;
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: "json",
|
|
url: "./?_m=scene3d&_a=get_scene",
|
|
success: function (result) {
|
|
if(result.code==0){
|
|
console.log('scene3d', result)
|
|
|
|
face = result.face;
|
|
$.each(result.data,function(i,obj){
|
|
$.each(obj.hotSpots,function(j,obj2){
|
|
if(obj2.type == "info"){
|
|
obj2.clickHandlerFunc = hotspotClick;
|
|
obj2.clickHandlerArgs = obj2.id;
|
|
}
|
|
});
|
|
|
|
const elemClass = 'layui-btn' + (result.firstScene == i ? ' active layui-btn-normal' : ' layui-btn-primary')
|
|
,elemHref = result.firstScene == i ? '' : ' href="javascript: gotoView('+i+');"'
|
|
$('#panorama-list').append('<a class="'+elemClass+'"'+elemHref+'>'+obj.title1+'</a>')
|
|
});
|
|
|
|
viewShow = pannellum.viewer('panorama', {
|
|
"default": {
|
|
"firstScene": result.firstScene,
|
|
"autoLoad": true
|
|
},
|
|
"scenes":result.data
|
|
});
|
|
|
|
viewShow.on('scenechange', function(sceneID) {
|
|
const originActiveElem = $('#panorama-list>a.active')
|
|
,originActiveElemIndex = originActiveElem.index() + 1
|
|
$('#panorama-list>a.active').removeClass('active layui-btn-normal').addClass('layui-btn-primary').attr('href', 'javascript: gotoView('+originActiveElemIndex+');')
|
|
$('#panorama-list>a').eq(sceneID-1).removeClass('layui-btn-primary').addClass('active layui-btn-normal').removeAttr('href')
|
|
|
|
const panoramaListElem = $('#panorama-list')
|
|
const activeWith = 72
|
|
const marginWidth = 16
|
|
|
|
panoramaListElem.scrollLeft((activeWith + marginWidth) * (sceneID - 1) + marginWidth + activeWith / 2 - $('#panorama-list').width() / 2)
|
|
|
|
})
|
|
|
|
$("#panorama").height($(window, top.document).height())
|
|
}else{
|
|
layer.msg(result.msg);
|
|
}
|
|
},
|
|
error : function() {
|
|
layer.msg('异常，请刷新！', {
|
|
offset: '15px'
|
|
,icon: 3
|
|
,time: 1000
|
|
});
|
|
}
|
|
|
|
})
|
|
$(window, top.document).resize(function() {
|
|
$("#panorama").height($(this).height())
|
|
})
|
|
|
|
//单款详情
|
|
function hotspotClick(hotSpotDiv, args){
|
|
if(face=='2')
|
|
var url1="dk_single_qj.htm";
|
|
else
|
|
var url1="dk_single.htm";
|
|
var layer = parent.layer;
|
|
index_dk_single = layer.open({
|
|
type: 2,
|
|
title: '',
|
|
content: url1+'?khid='+args,
|
|
offset: 'b',
|
|
closeBtn:0,
|
|
anim: 2,
|
|
});
|
|
layer.full(index_dk_single);
|
|
}
|
|
|
|
document.getElementById('panorama-list').addEventListener('animationend', function() {
|
|
if ($(this).width() === 0) {
|
|
$(this).hide().removeClass('animation-unfold-to-right-reverse')
|
|
$('#panorama-list-switch i').css('color', 'white')
|
|
} else {
|
|
$(this).show().removeClass('animation-unfold-to-right')
|
|
$('#panorama-list-switch i').css('color', '#1E9FFF')
|
|
}
|
|
})
|
|
|
|
});
|
|
|
|
//
|
|
function togglePanoramaList() {
|
|
layui.use('jquery', function() {
|
|
const $ = layui.jquery
|
|
|
|
const panoramaListElem = $('#panorama-list')
|
|
if (panoramaListElem.css('display') === 'none') {
|
|
panoramaListElem.show().addClass('animation-unfold-to-right')
|
|
} else {
|
|
panoramaListElem.addClass('animation-unfold-to-right-reverse')
|
|
}
|
|
})
|
|
}
|
|
// 跳转全景画面
|
|
function gotoView(index) {
|
|
viewShow.loadScene(index)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |