| 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" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="./css/animsition.css">
</head>
<style>
</style>
<body>
<?php include 'inc/nav.html'; ?>
<a href="gfloor.php" class="link backBtn">
< BACK</a>
<div class="footerMenu d-flex ">
<a class="shoplogoImg" href="#" data-shop="shop01"><img src="../3d_city/img/logo/logo01.jpg"
class="w-100">
</a>
<a class="shoplogoImg" href="#" data-shop="shop02"><img src="../3d_city/img/logo/logo02.jpg"
class="w-100">
</a>
<a class="shoplogoImg" href="#" data-shop="shop03"><img src="../3d_city/img/logo/logo02.jpg"
class="w-100">
</a>
<a class="shoplogoImg" href="#" data-shop="shop04"><img src="../3d_city/img/logo/logo02.jpg"
class="w-100">
</a>
<a class="shoplogoImg" href="#" data-shop="shop05"><img src="../3d_city/img/logo/logo02.jpg"
class="w-100">
</a>
<a class="shoplogoImg" href="#" data-shop="shop06"><img src="../3d_city/img/logo/logo02.jpg"
class="w-100">
</a>
</div>
<div class="loadPage">
</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("shop/g_shop01.php");
});
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 + "");
});
$(document).on("click", ".shoplogoImg", function() {
// call this to make the model larger/ zoom in
var shop = $(this).data("shop");
switch (shop) {
case "shop01":
$(".loadPage").load("shop/g_shop01.php");
break;
case "shop02":
$(".loadPage").load("shop/g_shop02.php");
break;
case "shop03":
$(".loadPage").load("shop/g_shop01.php");
break;
case "shop04":
$(".loadPage").load("shop/g_shop02.php");
break;
case "shop05":
$(".loadPage").load("shop/g_shop01.php");
break;
case "shop06":
$(".loadPage").load("shop/g_shop02.php");
break;
default:
// code block
}
// call this to make it smaller / zoom out
//zoomModel(false, 4);
});
$('.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>