| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/3dweb/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/nav.css">
<link rel="stylesheet" type="text/css" href="./css/resivponsive.css">
<link rel="stylesheet" type="text/css" href="./css/animsition.css">
</head>
<style>
</style>
<body>
<?php include 'inc/nav.html'; ?>
<div class="footerMenu d-flex flex-r">
<h3 class="footerMenuTitle">Excland Department Store</h3>
<div class="w-100">
<div class="step-nav">
<div class="step first">
<div class="radial-progress active" data-index="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>B/F</p>
<p class="floorTitle">超級市場</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="1">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>G/F</p>
<p class="floorTitle">男士服飾及手袋</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="2">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>1/F</p>
<p class="floorTitle">女士服飾,<br>手袋及配飾</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="3">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>2/F</p>
<p class="floorTitle">酒類產品</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="4">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>3/F</p>
<p class="floorTitle">運動及户外用品</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="5">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>4/F</p>
<p class="floorTitle">家具及家居用品</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="6">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>5/F</p>
<p class="floorTitle">電器用品</p>
</div>
<div class="step">
<div class="line">
<div class="progress"></div>
</div>
<div class="radial-progress" data-index="7">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="inner-circle"></div>
</div>
</div>
<p>6/F</p>
<p class="floorTitle">名牌手袋</p>
</div>
</div>
<div class="copy-holder">
<div class="step-1 stepDetail active">
<h4>超級市場</h4>
</div>
<div class="step-2 stepDetail">
<h4>男士服飾及手袋</h4>
</div>
<div class="step-3 stepDetail">
<h4>女士服飾,手袋及配飾</h4>
</div>
<div class="step-4 stepDetail">
<h4>酒類產品</h4>
</div>
<div class="step-5 stepDetail">
<h4>運動及户外用品</h4>
</div>
<div class="step-6 stepDetail">
<h4>家具及家居用品</h4>
</div>
<div class="step-7 stepDetail">
<h4>電器用品</h4>
</div>
<div class="step-8 stepDetail">
<h4>名牌手袋</h4>
</div>
</div>
</div>
</div>
<div class="loadPage">
<div class="world">
<div class="annotation">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script>
$(document).ready(function() {
$(".loadPage").load("page/g_floor.php", function(response, status, xhr) {
if (status == "error") {
//Something went wrong, have your error fallback code here
}
});
});
var fill_rotation = 180;
var fix_rotation = fill_rotation * 2;
var mainTl = new TimelineMax({
paused: true
});
$(".step:not(.first) .radial-progress").each(function(i) {
var circle = $(this);
var line = circle.prev('.line').find('.progress');
var circleFill = circle.find('.fill:not(.fix)');
var circleMask = circle.find('.mask.full');
var circleFillMix = circle.find('.fill.fix');
mainTl.to(line, 0.15, {
width: "100%"
})
.to(circle, 0.3, {
rotation: "-=" + fill_rotation
}, "fillCircle-" + i + "")
.to([circleFill, circleMask], 0.3, {
rotation: fill_rotation
}, "fillCircle-" + i + "")
.to(circleFillMix, 0.3, {
rotation: fix_rotation
}, "fillCircle-" + i + "")
.set(circleFillMix, {
rotation: fix_rotation
}, "stopPoint-" + i + "");
});
$('.step .radial-progress').click(function() {
$('.floorTitle').css("color", "rgb(119,119,119)");
$(this).parent().find('.floorTitle').css("color", "#03A9F4");
if ($(this).hasClass('active')) {
return false;
}
animateToDefault();
$('.active').removeClass('active');
var index = parseInt($(this).attr('data-index'));
switch (index) {
case 0:
$(".loadPage").load("page/g_floor.php");
// code block
break;
case 1:
$(".loadPage").load("page/1_floor.php");
// code block
break;
default:
// code block
}
mainTl.tweenTo("stopPoint-" + (index - 1) + "", {
onComplete: animateToActive,
onCompleteParams: [$(this)]
});
});
function animateToActive(el) {
var index = parseInt(el.attr('data-index')) + 1;
$('.copy-holder').find(".step-" + index + "").addClass('active');
el.addClass('active');
var innerCircle = el.find('.inner-circle');
var inset = el.find('.inset');
var circle = el.find('.circle');
var mask = el.find('.mask');
var fill = el.find('.fill');
var number = el.next('p');
var stepsCopy = $('.copy-holder div.active');
TweenLite.set(number, {
color: "#03A9F4",
fontSize: "1rem"
})
TweenLite.to(innerCircle, 0.15, {
scale: 0
});
TweenLite.to(el, 0.3, {
scale: 1.3,
zIndex: 10,
ease: Back.easeOut
});
TweenLite.fromTo(stepsCopy, 0.7, {
autoAlpha: 0
}, {
autoAlpha: 1
});
}
function animateToDefault() {
var mainCircle = $('.radial-progress.active');
var innerCircle = $('.radial-progress.active').find('.inner-circle');
var inset = $('.radial-progress.active').find('.inset');
var number = $('.radial-progress.active').next('p');
var stepsCopy = $('.copy-holder div');
TweenLite.to(innerCircle, 0.15, {
scale: 1
})
TweenLite.set(number, {
color: "rgb(119,119,119)",
fontSize: 30
});
TweenLite.to(mainCircle, 0.3, {
scale: 1,
zIndex: 1,
ease: Bounce.easeOut
});
TweenLite.to(stepsCopy, 0.7, {
autoAlpha: 0
});
}
</script>
</body>
</html>