docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 添加浮动效果

Browse Source
This commit is contained in:
PASSER-BY 2023-12-23 00:44:36 +08:00
parent bb465021c4
commit 9ae41c29d4
4 changed files with 95 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -40,8 +40,8 @@
</svg> </svg>
</div> </div>
<div class="header"> <div class="header">
<div class="inner">
<div class="mod-head"> <div class="mod-head">
<div class="inner">
<div class="bd"> <div class="bd">
<span class="language"> <span class="language">
<a class="active" href="/relationship/">简体</a> <a class="active" href="/relationship/">简体</a>
@ -431,11 +431,46 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mod-fixedbar">
<div class="bd">
<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
</div>
</div>
</div> </div>
</div> </div>
<script type="text/javascript" src="dist/relationship.min.js"></script> <script type="text/javascript" src="dist/relationship.min.js"></script>
<script type="text/javascript" src="dist/relationship-mode.min.js"></script> <script type="text/javascript" src="dist/relationship-mode.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// 头部滚动
(function(){
let $header = document.querySelector('.header');
document.addEventListener('scroll',function(){
let scrollTop = document.documentElement.scrollTop;
let ratio = Math.min(scrollTop/1000,1);
$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
});
})();
// 底部滚动
(function(){
let timer = null;
let $gotop = document.querySelector('.mod-fixedbar a');
$gotop.addEventListener('click',function(){
cancelAnimationFrame(timer);
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let move = scrollTop/18;
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});
})();
// 获取数量 // 获取数量
document.getElementById('count').innerText = relationship.dataCount; document.getElementById('count').innerText = relationship.dataCount;

BIN
static/image/gotop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 881 B

21
static/style/index.css
View File

@ -91,6 +91,14 @@ a:hover{
} }
} }
.header{
position: sticky;
left: 0;
top: 0;
width: 100%;
z-index: 99;
backdrop-filter: blur(10px);
}
.mod-head .bd{ .mod-head .bd{
height: 36px; height: 36px;
padding: 10px 0; padding: 10px 0;
@ -645,6 +653,19 @@ a:hover{
line-height: 30px; line-height: 30px;
} }
.mod-fixedbar .bd a{
position: fixed;
right: 20px;
bottom: 20px;
display: block;
width: 48px;
height: 48px;
background: rgba(255,255,255,0.8);
box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
line-height: 48px;
text-align: center;
}
@media screen and (max-width: 1020px) { @media screen and (max-width: 1020px) {
.header{ .header{
margin-bottom: 10px; margin-bottom: 10px;

37
zh-HK.html
View File

@ -40,8 +40,8 @@
</svg> </svg>
</div> </div>
<div class="header"> <div class="header">
<div class="inner">
<div class="mod-head"> <div class="mod-head">
<div class="inner">
<div class="bd"> <div class="bd">
<span class="language"> <span class="language">
<a href="/relationship/">简体</a> <a href="/relationship/">简体</a>
@ -431,11 +431,46 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mod-fixedbar">
<div class="bd">
<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
</div>
</div>
</div> </div>
</div> </div>
<script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script> <script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script>
<script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script> <script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// 頭部滾動
(function(){
let $header = document.querySelector('.header');
document.addEventListener('scroll',function(){
let scrollTop = document.documentElement.scrollTop;
let ratio = Math.min(scrollTop/1000,1);
$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
});
})();
// 底部滾動
(function(){
let timer = null;
let $gotop = document.querySelector('.mod-fixedbar a');
$gotop.addEventListener('click',function(){
cancelAnimationFrame(timer);
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let move = scrollTop/18;
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});
})();
// 獲取數量 // 獲取數量
document.getElementById('count').innerText = relationship.dataCount; document.getElementById('count').innerText = relationship.dataCount;