增加回到顶部按钮
This commit is contained in:
parent
28c51e58e6
commit
db6940f715
2
404.html
2
404.html
@ -34,7 +34,7 @@ permalink: /404.html
|
||||
</label>
|
||||
|
||||
<div class="NotFound">
|
||||
|
||||
<!--NOT FOUND-->
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
|
||||
239
css/myui.css
239
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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
index.html
15
index.html
@ -44,12 +44,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="js/drag.js"></script>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
message.alert('404 Not Found', '您所查找的页面不存在',function(){
|
||||
message.alert('404 Not Found', '您所查找的页面不存在', function () {
|
||||
window.location.href = '/';
|
||||
});
|
||||
10
js/index.js
10
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('出错了!', '网络连接出错了，请稍后再试');
|
||||
}
|
||||
});
|
||||
@ -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('这里是', '<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:20px;text-align:center">AHPU-老中医</div>的博客 </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() {
|
||||
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 =
|
||||
'<div class="msg-container" id="mc-' + id + '">' +
|
||||
|
||||
10
js/view.js
10
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('出错了!', '网络连接出错了，请稍后再试');
|
||||
}
|
||||
});
|
||||
})();
|
||||
15
view.html
15
view.html
@ -44,12 +44,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="js/drag.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user