diff --git a/404.html b/404.html
index 96a20b6..e4983e8 100644
--- a/404.html
+++ b/404.html
@@ -34,7 +34,7 @@ permalink: /404.html
-
+
diff --git a/css/myui.css b/css/myui.css
index 40678aa..19b1554 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -103,7 +103,7 @@ body {
cursor: pointer !important;
z-index: 4;
padding-left: 10px;
- padding-top:2px
+ padding-top: 2px
}
[for=menu-control].menu-button-container:hover span {
@@ -121,8 +121,8 @@ body {
transition: all .2s ease;
opacity: 0;
visibility: hidden;
- top:0px;
- left:0px
+ top: 0px;
+ left: 0px
}
#menu-control:checked~label.content-mask {
@@ -138,34 +138,34 @@ body {
position: relative;
cursor: pointer;
transition: all .2s ease-in;
- top:0px;
- left:0px
+ top: 0px;
+ left: 0px
}
-.menu-button span:before{
- content:'';
+.menu-button span:before {
+ content: '';
display: block;
position: relative;
- margin-top:5px
+ margin-top: 5px
}
-#menu-control:checked~.menu-button-container .menu-button>span:nth-child(1){
- transform:rotate(45deg);
- width:30px;
- top:8px;
- left:2px
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(1) {
+ transform: rotate(45deg);
+ width: 30px;
+ top: 8px;
+ left: 2px
}
-#menu-control:checked~.menu-button-container .menu-button>span:nth-child(2){
- width:0px;
- left:20px
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(2) {
+ width: 0px;
+ left: 20px
}
-#menu-control:checked~.menu-button-container .menu-button>span:nth-child(3){
- transform:rotate(-45deg);
- width:30px;
- top:-8px;
- left:2px
+#menu-control:checked~.menu-button-container .menu-button>span:nth-child(3) {
+ transform: rotate(-45deg);
+ width: 30px;
+ top: -8px;
+ left: 2px
}
.content-border {
@@ -174,7 +174,7 @@ body {
padding: 50px 20px 25px;
transition: padding .5s ease .1s;
left: 50%;
- transform:translateX(-50%)
+ transform: translateX(-50%)
}
.content {
@@ -307,120 +307,173 @@ body {
background-color: rgba(95, 95, 95, 0.7);
z-index: 998;
opacity: 0;
- top:0px;
+ top: 0px;
left: 0px
}
-.container{
+.container {
max-width: 1440px;
- margin:0 auto;
+ margin: 0 auto;
position: relative
}
-.container:before{
- content:'';
+.container:before {
+ content: '';
display: block;
- position:fixed;
- top:0px;
- left:0px;
- height:150%;
- width:100%;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ height: 150%;
+ width: 100%;
background: black url(../images/bg.jpg) no-repeat top;
background-size: cover
}
-.clearfix:after{
- content:'';
+.clearfix:after {
+ content: '';
display: block;
- height:0px;
+ height: 0px;
clear: both;
visibility: hidden
}
-.sidebar-border{
+.sidebar-border {
position: absolute;
- left:0px;
- top:0px;
+ left: 0px;
+ top: 0px;
display: block;
- width:250px;
+ width: 250px;
background-color: transparent;
- padding-top:50px;
- overflow-x:hidden;
+ padding-top: 50px;
+ overflow-x: hidden;
padding-bottom: 10px;
padding-left: 10px
}
-.sidebar{
+.sidebar {
position: relative;
display: block;
- width:100%;
- background-color:rgba(255,255,255,.8);
+ width: 100%;
+ background-color: rgba(255, 255, 255, .8);
border-radius: 15px;
- padding:15px;
- cursor:default
+ padding: 15px;
+ cursor: default
}
-.sidebar div:first-child{
+.sidebar div:first-child {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px
}
-.loading{
+.loading {
display: block;
- position:absolute;
- top:50%;
- left:50%;
- transform:translate(-50%,-50%);
- width:100px;
- height:100px;
- z-index:100;
- animation:fadeIn .2s ease .5s forwards;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100px;
+ height: 100px;
+ z-index: 100;
+ animation: fadeIn .2s ease .5s forwards;
opacity: 0;
}
-.loading span{
+.loading span {
display: block;
position: absolute;
- top:0px;
+ top: 0px;
left: 45px;
- height:10px;
- width:10px;
- background:white;
+ height: 10px;
+ width: 10px;
+ background: white;
border-radius: 10px;
transform-origin: 5px 50px;
- animation: load 2s cubic-bezier(.6,0,.4,1) infinite;
-
+ animation: load 2s cubic-bezier(.6, 0, .4, 1) infinite;
+
}
-.loading span:nth-of-type(1){
+.loading span:nth-of-type(1) {
animation-delay: .125s
}
-.loading span:nth-of-type(2){
+
+.loading span:nth-of-type(2) {
animation-delay: .250s
}
-.loading span:nth-of-type(3){
+
+.loading span:nth-of-type(3) {
animation-delay: .375s
}
-.loading span:nth-of-type(4){
+
+.loading span:nth-of-type(4) {
animation-delay: .5s
}
-.loading span:nth-of-type(5){
+
+.loading span:nth-of-type(5) {
animation-delay: .625s
}
-.loading span:nth-of-type(6){
+
+.loading span:nth-of-type(6) {
animation-delay: .750s
}
+.top {
+ display: block;
+ position: fixed;
+ bottom: 10px;
+ right: 25px;
+ height: 40px;
+ width: 40px;
+ border: 10px;
+ background: #ccc;
+ cursor: pointer;
+ border: 2px solid gray;
+ transition: border .3s ease;
+ border-radius: 50%;
+ opacity: 0;
+}
+
+.top:hover {
+ border: 2px solid white;
+}
+
+.topBtn:before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 50%;
+ height: 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) rotate(45deg);
+ border-left: 5px solid rgb(30, 30, 30);
+ border-top: 5px solid rgb(30, 30, 30);
+}
+
+.topBtn:after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 50%;
+ height: 50%;
+ top: 80%;
+ left: 50%;
+ transform: translate(-50%, -50%) rotate(45deg);
+ border-left: 5px solid rgb(30, 30, 30);
+ border-top: 5px solid rgb(30, 30, 30);
+}
+
@keyframes load {
- 0%{
- transform:rotate(0deg)
+ 0% {
+ transform: rotate(0deg)
}
+
50% {
- transform:rotate(360deg);
+ transform: rotate(360deg);
}
- 100%{
- transform:rotate(360deg);
+
+ 100% {
+ transform: rotate(360deg);
}
}
@@ -455,7 +508,7 @@ body {
margin-right: auto
}
- .content-border{
+ .content-border {
padding-left: 260px;
}
@@ -478,38 +531,38 @@ body {
padding: 50px 5px 25px;
}
- .msg-footer span{
- display:block;
+ .msg-footer span {
+ display: block;
position: absolute;
- height:100%;
- width:100%;
- top:0px;
- left:0px;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ left: 0px;
text-align: center;
- padding-top:10px;
+ padding-top: 10px;
border-radius: 0 0 15px 15px
}
- .msg-footer span:active{
- background-color:black;
+ .msg-footer span:active {
+ background-color: black;
border-radius: 0px 0px 10px 13px;
- color:white
+ color: white
}
- .sidebar-border{
+ .sidebar-border {
position: relative;
- width:100%;
- height:auto;
- padding:0px
+ width: 100%;
+ height: auto;
+ padding: 0px
}
- .sidebar div:nth-of-type(n+1) *{
+ .sidebar div:nth-of-type(n+1) * {
text-align: center
}
- .sidebar div:nth-of-type(n+1) a{
- border:1px solid black;
- border-radius:5px
+ .sidebar div:nth-of-type(n+1) a {
+ border: 1px solid black;
+ border-radius: 5px
}
}
diff --git a/index.html b/index.html
index 939631e..dc7bb44 100644
--- a/index.html
+++ b/index.html
@@ -44,12 +44,15 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/js/404.js b/js/404.js
index d0f64be..104456a 100644
--- a/js/404.js
+++ b/js/404.js
@@ -1,3 +1,3 @@
-message.alert('404 Not Found', '您所查找的页面不存在',function(){
+message.alert('404 Not Found', '您所查找的页面不存在', function () {
window.location.href = '/';
});
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 38556e7..bda1bf3 100644
--- a/js/index.js
+++ b/js/index.js
@@ -18,7 +18,7 @@ $.ajax({
success: function (response) {
var lastIndex = response.length - 1;
- if(response.length <= index){
+ if (response.length <= index) {
return;
}
@@ -33,12 +33,12 @@ $.ajax({
success: function (res) {
appendContent(res);
},
- error:function(){
- message.alert('出错了!','网络连接出错了，请稍后再试');
+ error: function () {
+ message.alert('出错了!', '网络连接出错了，请稍后再试');
}
});
},
- error:function(){
- message.alert('出错了!','网络连接出错了，请稍后再试');
+ error: function () {
+ message.alert('出错了!', '网络连接出错了，请稍后再试');
}
});
\ No newline at end of file
diff --git a/js/initialize.js b/js/initialize.js
index 5266706..a595024 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -2,10 +2,41 @@ $(function () {
window.onselectstart = block;
window.ontouchstart = block;
window.ondragstart = block;
+ var topElem = $('.top'),
+ isCssed = false,
+ docTop;
+ toggleTop();
$('.msg-header').Drag($('.msg-container'));
$('.menu-container ul li span').on('click', function () {
message.alert('这里是', '');
});
+ topElem.on('click', function () {
+ $('html,body').animate({
+ scrollTop: '0px'
+ }, 300);
+ });
+ window.onscroll = toggleTop;
+
+ function toggleTop() {
+ docTop = document.documentElement.scrollTop;
+ if (docTop >= 300 && !isCssed) {
+ topElem.css({
+ "display": "block",
+ "animation": "fadeIn .2s forwards"
+ });
+ isCssed = true;
+ } else if (docTop < 300 && isCssed) {
+ topElem.css({
+ "animation": "fadeOut .2s forwards"
+ });
+ setTimeout(function () {
+ topElem.css({
+ "display": "none"
+ });
+ }, 200);
+ isCssed = false;
+ }
+ }
function block() {
return false;
@@ -29,7 +60,7 @@ $(function () {
m.remove();
}, 300);
message.alertCode = '';
- if(message.callback)
+ if (message.callback)
message.callback();
});
})();
@@ -59,11 +90,11 @@ var message = new function () {
message.callback = callback;
appendHtml(header, content);
-
+
}
- function appendHtml (header, content) {
+ function appendHtml(header, content) {
var id = uuid();
var html =
'' +
diff --git a/js/view.js b/js/view.js
index dfbf907..80bcd07 100644
--- a/js/view.js
+++ b/js/view.js
@@ -5,7 +5,7 @@
url: "content.json?timestamp=" + (new Date()).valueOf(),
dataType: "json",
success: function (response) {
-
+
if (response.length <= index)
return;
listContent(response, index);
@@ -19,13 +19,13 @@
success: function (res) {
appendContent(res);
},
- error:function(){
- message.alert('出错了!','网络连接出错了，请稍后再试');
+ error: function () {
+ message.alert('出错了!', '网络连接出错了，请稍后再试');
}
});
},
- error:function(){
- message.alert('出错了!','网络连接出错了，请稍后再试');
+ error: function () {
+ message.alert('出错了!', '网络连接出错了，请稍后再试');
}
});
})();
\ No newline at end of file
diff --git a/view.html b/view.html
index 309ae41..a9352ee 100644
--- a/view.html
+++ b/view.html
@@ -44,12 +44,15 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+