From 8dddc657bca9b68b7ac5b25275303e96b583a713 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期三, 22 十二月 2021 16:48:06 +0800
Subject: [PATCH] #
---
static/css/index.css | 88 +++++++++++++++++++++++++++++
static/js/app.js | 12 ++++
views/index.html | 28 ++++++++
3 files changed, 125 insertions(+), 3 deletions(-)
diff --git a/static/css/index.css b/static/css/index.css
index 91e0efd..54313e7 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -234,7 +234,93 @@
-
+.menu {
+ position:fixed;
+ top:50%;
+ right:20px;
+ transform:translateY(-50%);
+ z-index:20;
+ display:block;
+ margin:0;
+ padding:0;
+}
+.menu > li {
+ position:relative;
+ width:20px;
+ height:30px;
+ line-height:20px;
+ font-size:12px;
+ color:#fff;
+ text-align:center;
+ transform:translateX(50px) translateY(25px);
+ padding:0;
+ display:block;
+ margin-bottom:10px;
+ cursor:pointer;
+}
+.menu > li > div {
+ position:relative;
+ width:20px;
+ height:20px;
+ transform:rotate(45deg);
+ transition:all 300ms;
+}
+.menu > li:first-child {
+ transition:all 200ms;
+}
+.menu > li:nth-child(2) {
+ transition:all 500ms;
+}
+.menu > li:nth-child(3) {
+ transition:all 800ms;
+}
+.menu.show > li {
+ transform:translateX(0) translateY(0);
+ opacity:1;
+}
+.menu li > div::before {
+ content:"";
+ position:absolute;
+ top:0;
+ left:0;
+ width:19px;
+ height:19px;
+ border-top:solid 1px #fff;
+ border-left:solid 1px #fff;
+ transition:all 300ms;
+}
+.menu li > div::after {
+ content:"";
+ position:absolute;
+ bottom:0;
+ right:0;
+ width:19px;
+ height:19px;
+ border-bottom:solid 1px #fff;
+ border-right:solid 1px #fff;
+ transition:all 300ms;
+}
+.menu > li > div > div {
+ transform:rotate(-45deg);
+}
+.menu li:hover > div {
+ transform:rotate(0) !important;
+}
+.menu li:hover > div::before {
+ width:5px;
+ height:5px;
+ border-top:solid 1px #0f0;
+ border-left:solid 1px #0f0;
+}
+.menu li:hover > div::after {
+ width:5px;
+ height:5px;
+ border-bottom:solid 1px #0f0;
+ border-right:solid 1px #0f0;
+}
+.menu li:hover > div > div {
+ transform:rotate(0);
+}
diff --git a/static/js/app.js b/static/js/app.js
index bf23ed8..3e5aa65 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -420,6 +420,18 @@
this.controls.getObject().position.z = 200;
this.controls.lock();
}
+ this.mainView = function () {
+ this.camera.position.set( 1400, 400, 2000 );
+ this.camera.lookAt( 1400, 500, 0 );
+ }
+ this.leftView = function () {
+ this.camera.position.set( -3000, 300, -2000 );
+ this.camera.lookAt(0, 500, -2000);
+ }
+ this.verticalView = function () {
+ this.camera.position.set( 1400, 6000, -1800 );
+ this.camera.lookAt( 1400, 0, -1800 );
+ }
},
};
diff --git a/views/index.html b/views/index.html
index c530bcd..48c88f9 100644
--- a/views/index.html
+++ b/views/index.html
@@ -70,6 +70,17 @@
</div>
<div id="control-remind" class="remind">鎮ㄧ幇鍦ㄥ彲浠ヨ嚜鐢辩Щ鍔ㄨ瑙�</div>
</div>
+<ul class="menu" id="menu">
+ <li id="menu-w">
+ <div><div>涓�</div></div>
+ </li>
+ <li id="menu-m">
+ <div><div>宸�</div></div>
+ </li>
+ <li id="menu-t">
+ <div><div>淇�</div></div>
+ </li>
+</ul>
<div id="container"></div>
@@ -91,6 +102,17 @@
document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)';
}, false);
+ document.getElementById("menu-w").addEventListener('click', function () {
+ player.mainView();
+ }, false);
+
+ document.getElementById("menu-m").addEventListener('click', function () {
+ player.leftView();
+ }, false);
+
+ document.getElementById("menu-t").addEventListener('click', function () {
+ player.verticalView();
+ }, false);
</script>
<script>
var percent = 0;
@@ -112,13 +134,15 @@
$(document).on('click','.btn-word', function () {
fullScreen()
- $("#mask").fadeOut(1, function () {
+ $("#mask").fadeOut(3000, function () { // 3000
+ $("#menu").addClass("show");
setTimeout(function () {
$("#ship-type-ul").css("transform", "translateY(-40px)");
$("#ship-info-btn .btn-word").text("浣撻獙璋冨害涓栫晫");
$("#ship-info-btn").data("type", 2).addClass("show");
$("#ship-info-btn #btn-lock").css("z-index", "10");
- }, 1);
+ $("#menu li").css("transition", "all 200ms !important");
+ }, 3000); // 1000
});
$("#title-box, #logo").addClass("show");
$("#ship-info-btn").removeClass("show");
--
Gitblit v1.9.1