wcx/wolegca.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加回到顶部按钮

Browse Source
This commit is contained in:
wolegca 2019-10-19 21:56:07 +08:00
parent 28c51e58e6
commit db6940f715
8 changed files with 210 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
404.html
View File

@ -34,7 +34,7 @@ permalink: /404.html
</label> </label>
<div class="NotFound"> <div class="NotFound">
<!--NOT FOUND-->
</div> </div>
</div> </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

237
css/myui.css
View File

@ -103,7 +103,7 @@ body {
cursor: pointer !important; cursor: pointer !important;
z-index: 4; z-index: 4;
padding-left: 10px; padding-left: 10px;
padding-top:2px padding-top: 2px
} }
[for=menu-control].menu-button-container:hover span { [for=menu-control].menu-button-container:hover span {
@ -121,8 +121,8 @@ body {
transition: all .2s ease; transition: all .2s ease;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
top:0px; top: 0px;
left:0px left: 0px
} }
#menu-control:checked~label.content-mask { #menu-control:checked~label.content-mask {
@ -138,34 +138,34 @@ body {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: all .2s ease-in; transition: all .2s ease-in;
top:0px; top: 0px;
left:0px left: 0px
} }
.menu-button span:before{ .menu-button span:before {
content:''; content: '';
display: block; display: block;
position: relative; position: relative;
margin-top:5px margin-top: 5px
} }
#menu-control:checked~.menu-button-container .menu-button>span:nth-child(1){ #menu-control:checked~.menu-button-container .menu-button>span:nth-child(1) {
transform:rotate(45deg); transform: rotate(45deg);
width:30px; width: 30px;
top:8px; top: 8px;
left:2px left: 2px
} }
#menu-control:checked~.menu-button-container .menu-button>span:nth-child(2){ #menu-control:checked~.menu-button-container .menu-button>span:nth-child(2) {
width:0px; width: 0px;
left:20px left: 20px
} }
#menu-control:checked~.menu-button-container .menu-button>span:nth-child(3){ #menu-control:checked~.menu-button-container .menu-button>span:nth-child(3) {
transform:rotate(-45deg); transform: rotate(-45deg);
width:30px; width: 30px;
top:-8px; top: -8px;
left:2px left: 2px
} }
.content-border { .content-border {
@ -174,7 +174,7 @@ body {
padding: 50px 20px 25px; padding: 50px 20px 25px;
transition: padding .5s ease .1s; transition: padding .5s ease .1s;
left: 50%; left: 50%;
transform:translateX(-50%) transform: translateX(-50%)
} }
.content { .content {
@ -307,120 +307,173 @@ body {
background-color: rgba(95, 95, 95, 0.7); background-color: rgba(95, 95, 95, 0.7);
z-index: 998; z-index: 998;
opacity: 0; opacity: 0;
top:0px; top: 0px;
left: 0px left: 0px
} }
.container{ .container {
max-width: 1440px; max-width: 1440px;
margin:0 auto; margin: 0 auto;
position: relative position: relative
} }
.container:before{ .container:before {
content:''; content: '';
display: block; display: block;
position:fixed; position: fixed;
top:0px; top: 0px;
left:0px; left: 0px;
height:150%; height: 150%;
width:100%; width: 100%;
background: black url(../images/bg.jpg) no-repeat top; background: black url(../images/bg.jpg) no-repeat top;
background-size: cover background-size: cover
} }
.clearfix:after{ .clearfix:after {
content:''; content: '';
display: block; display: block;
height:0px; height: 0px;
clear: both; clear: both;
visibility: hidden visibility: hidden
} }
.sidebar-border{ .sidebar-border {
position: absolute; position: absolute;
left:0px; left: 0px;
top:0px; top: 0px;
display: block; display: block;
width:250px; width: 250px;
background-color: transparent; background-color: transparent;
padding-top:50px; padding-top: 50px;
overflow-x:hidden; overflow-x: hidden;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 10px padding-left: 10px
} }
.sidebar{ .sidebar {
position: relative; position: relative;
display: block; display: block;
width:100%; width: 100%;
background-color:rgba(255,255,255,.8); background-color: rgba(255, 255, 255, .8);
border-radius: 15px; border-radius: 15px;
padding:15px; padding: 15px;
cursor:default cursor: default
} }
.sidebar div:first-child{ .sidebar div:first-child {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin-bottom: 10px margin-bottom: 10px
} }
.loading{ .loading {
display: block; display: block;
position:absolute; position: absolute;
top:50%; top: 50%;
left:50%; left: 50%;
transform:translate(-50%,-50%); transform: translate(-50%, -50%);
width:100px; width: 100px;
height:100px; height: 100px;
z-index:100; z-index: 100;
animation:fadeIn .2s ease .5s forwards; animation: fadeIn .2s ease .5s forwards;
opacity: 0; opacity: 0;
} }
.loading span{ .loading span {
display: block; display: block;
position: absolute; position: absolute;
top:0px; top: 0px;
left: 45px; left: 45px;
height:10px; height: 10px;
width:10px; width: 10px;
background:white; background: white;
border-radius: 10px; border-radius: 10px;
transform-origin: 5px 50px; 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 animation-delay: .125s
} }
.loading span:nth-of-type(2){
.loading span:nth-of-type(2) {
animation-delay: .250s animation-delay: .250s
} }
.loading span:nth-of-type(3){
.loading span:nth-of-type(3) {
animation-delay: .375s animation-delay: .375s
} }
.loading span:nth-of-type(4){
.loading span:nth-of-type(4) {
animation-delay: .5s animation-delay: .5s
} }
.loading span:nth-of-type(5){
.loading span:nth-of-type(5) {
animation-delay: .625s animation-delay: .625s
} }
.loading span:nth-of-type(6){
.loading span:nth-of-type(6) {
animation-delay: .750s 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 { @keyframes load {
0%{ 0% {
transform:rotate(0deg) transform: rotate(0deg)
} }
50% { 50% {
transform:rotate(360deg); transform: rotate(360deg);
} }
100%{
transform:rotate(360deg); 100% {
transform: rotate(360deg);
} }
} }
@ -455,7 +508,7 @@ body {
margin-right: auto margin-right: auto
} }
.content-border{ .content-border {
padding-left: 260px; padding-left: 260px;
} }
@ -478,38 +531,38 @@ body {
padding: 50px 5px 25px; padding: 50px 5px 25px;
} }
.msg-footer span{ .msg-footer span {
display:block; display: block;
position: absolute; position: absolute;
height:100%; height: 100%;
width:100%; width: 100%;
top:0px; top: 0px;
left:0px; left: 0px;
text-align: center; text-align: center;
padding-top:10px; padding-top: 10px;
border-radius: 0 0 15px 15px border-radius: 0 0 15px 15px
} }
.msg-footer span:active{ .msg-footer span:active {
background-color:black; background-color: black;
border-radius: 0px 0px 10px 13px; border-radius: 0px 0px 10px 13px;
color:white color: white
} }
.sidebar-border{ .sidebar-border {
position: relative; position: relative;
width:100%; width: 100%;
height:auto; height: auto;
padding:0px padding: 0px
} }
.sidebar div:nth-of-type(n+1) *{ .sidebar div:nth-of-type(n+1) * {
text-align: center text-align: center
} }
.sidebar div:nth-of-type(n+1) a{ .sidebar div:nth-of-type(n+1) a {
border:1px solid black; border: 1px solid black;
border-radius:5px border-radius: 5px
} }
} }

15
index.html
View File

@ -44,12 +44,15 @@
</div> </div>
</div> </div>
<div class="loading"> <div class="loading">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div>
<div class="top" title="回到顶部">
<span class="topBtn"></span>
</div> </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/drag.js"></script> <script src="js/drag.js"></script>

2
js/404.js
View File

@ -1,3 +1,3 @@
message.alert('404 Not Found', '您所查找的页面不存在',function(){ message.alert('404 Not Found', '您所查找的页面不存在', function () {
window.location.href = '/'; window.location.href = '/';
}); });

10
js/index.js
View File

@ -18,7 +18,7 @@ $.ajax({
success: function (response) { success: function (response) {
var lastIndex = response.length - 1; var lastIndex = response.length - 1;
if(response.length <= index){ if (response.length <= index) {
return; return;
} }
@ -33,12 +33,12 @@ $.ajax({
success: function (res) { success: function (res) {
appendContent(res); appendContent(res);
}, },
error:function(){ error: function () {
message.alert('出错了!','网络连接出错了，请稍后再试'); message.alert('出错了!', '网络连接出错了，请稍后再试');
} }
}); });
}, },
error:function(){ error: function () {
message.alert('出错了!','网络连接出错了，请稍后再试'); message.alert('出错了!', '网络连接出错了，请稍后再试');
} }
}); });

35
js/initialize.js
View File

@ -2,10 +2,41 @@ $(function () {
window.onselectstart = block; window.onselectstart = block;
window.ontouchstart = block; window.ontouchstart = block;
window.ondragstart = block; window.ondragstart = block;
var topElem = $('.top'),
isCssed = false,
docTop;
toggleTop();
$('.msg-header').Drag($('.msg-container')); $('.msg-header').Drag($('.msg-container'));
$('.menu-container ul li span').on('click', function () { $('.menu-container ul li span').on('click', function () {
message.alert('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>'); message.alert('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客&nbsp;&nbsp;&nbsp;</div>');
}); });
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() { function block() {
return false; return false;
@ -29,7 +60,7 @@ $(function () {
m.remove(); m.remove();
}, 300); }, 300);
message.alertCode = ''; message.alertCode = '';
if(message.callback) if (message.callback)
message.callback(); message.callback();
}); });
})(); })();
@ -63,7 +94,7 @@ var message = new function () {
} }
function appendHtml (header, content) { function appendHtml(header, content) {
var id = uuid(); var id = uuid();
var html = var html =
'<div class="msg-container" id="mc-' + id + '">' + '<div class="msg-container" id="mc-' + id + '">' +

8
js/view.js
View File

@ -19,13 +19,13 @@
success: function (res) { success: function (res) {
appendContent(res); appendContent(res);
}, },
error:function(){ error: function () {
message.alert('出错了!','网络连接出错了，请稍后再试'); message.alert('出错了!', '网络连接出错了，请稍后再试');
} }
}); });
}, },
error:function(){ error: function () {
message.alert('出错了!','网络连接出错了，请稍后再试'); message.alert('出错了!', '网络连接出错了，请稍后再试');
} }
}); });
})(); })();

15
view.html
View File

@ -44,12 +44,15 @@
</div> </div>
</div> </div>
<div class="loading"> <div class="loading">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div>
<div class="top" title="回到顶部">
<span class="topBtn"></span>
</div> </div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/drag.js"></script> <script src="js/drag.js"></script>