parent
bf09f0ea8c
commit
91fbc46910
@ -0,0 +1,331 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
color: azure;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
background-color: #000;
|
||||||
|
/*color: azure;*/
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.Progress {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
background-color: #000;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Prostick {
|
||||||
|
width: 0;
|
||||||
|
background-color: aqua;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Topage {
|
||||||
|
border: 3px silver solid;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Topage ul {
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Topage ul li {
|
||||||
|
float: left;
|
||||||
|
margin: 0 15px;
|
||||||
|
line-height: 60px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 70px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Topage ul li:hover {
|
||||||
|
animation: jump .3s;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Topage img {
|
||||||
|
float: left;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Highlight {
|
||||||
|
width: 100px;
|
||||||
|
height: 5px;
|
||||||
|
background-color: #66ccff;
|
||||||
|
float: left;
|
||||||
|
transition: all 0.5s;
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 235.49px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #66ccff;
|
||||||
|
}
|
||||||
|
.box1{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1 img {
|
||||||
|
width: 1000px;
|
||||||
|
height: 550px;
|
||||||
|
margin: 100px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px white solid;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
top: 3px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.5s;
|
||||||
|
background-color: silver;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar ul {
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar ul li {
|
||||||
|
float: left;
|
||||||
|
margin: 0 15px;
|
||||||
|
line-height: 60px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 70px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar ul li:hover {
|
||||||
|
animation: jump .3s;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar img {
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
width: 124px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Highlight2 {
|
||||||
|
width: 70px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #66ccff;
|
||||||
|
float: left;
|
||||||
|
transition: all 0.5s;
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 179px;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.Top{
|
||||||
|
position: fixed;
|
||||||
|
background-color: #66ccff;
|
||||||
|
height: 35px;
|
||||||
|
width: 35px;
|
||||||
|
z-index: 999;
|
||||||
|
bottom: 100px;
|
||||||
|
right: 100px;
|
||||||
|
line-height: 35px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="Progress">
|
||||||
|
<div class="Prostick"></div>
|
||||||
|
</div>
|
||||||
|
<div class="Topage">
|
||||||
|
<img src="image/Title.png" title="明日方舟">
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<li>首页</li>
|
||||||
|
<li>公告</li>
|
||||||
|
<li>世界观</li>
|
||||||
|
<li>干员</li>
|
||||||
|
<li>玩法介绍</li>
|
||||||
|
<li>实机演示</li>
|
||||||
|
<div class="Highlight"></div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="NavBar">
|
||||||
|
<img src="image/Title.png" title="明日方舟">
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<li>首页</li>
|
||||||
|
<div class="Highlight2"></div>
|
||||||
|
<li>公告</li>
|
||||||
|
<li>世界观</li>
|
||||||
|
<li>干员</li>
|
||||||
|
<li>玩法介绍</li>
|
||||||
|
<li>实机演示</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box1">
|
||||||
|
<div class="firstyear">
|
||||||
|
<img src="image/1rd.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="secendyear">
|
||||||
|
<img src="image/2rd.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="thirdyear">
|
||||||
|
<img src="image/3rd.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="Top">Top</div>
|
||||||
|
<script>
|
||||||
|
let totalhight = document.body.scrollHeight - window.innerHeight
|
||||||
|
const Prostick = document.querySelector('.Prostick')
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
let pro = (window.pageYOffset / totalhight) * 100
|
||||||
|
Prostick.style.width = pro + '%'
|
||||||
|
})
|
||||||
|
|
||||||
|
let lis1 = document.querySelector('.Topage ul li')
|
||||||
|
let lis3 = document.querySelector('.NavBar ul li')
|
||||||
|
lis1.style.position = 'relative'
|
||||||
|
lis3.style.position = 'relative'
|
||||||
|
let lis = document.querySelectorAll('.Topage ul li')
|
||||||
|
let lis2 = document.querySelectorAll('.NavBar ul li')
|
||||||
|
const High = document.querySelector('.Highlight')
|
||||||
|
const High2 = document.querySelector('.Highlight2')
|
||||||
|
for (i = 0; i < lis.length; i++) {
|
||||||
|
|
||||||
|
let x = i
|
||||||
|
lis[i].addEventListener('click', function () {
|
||||||
|
|
||||||
|
lis2[x].style.color='#3388bb'
|
||||||
|
lis[x].style.color='#66ccff'
|
||||||
|
High.style.transform = `translateX(${x * 100}px)`
|
||||||
|
High2.style.transform = `translateX(${x * 100}px)`
|
||||||
|
|
||||||
|
for (i = 0; i < lis.length; i++) {
|
||||||
|
if (i == x) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
lis[i].style.color='azure'
|
||||||
|
lis2[i].style.color='#000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
const body = document.querySelector('body')
|
||||||
|
|
||||||
|
for (i = 0; i < lis.length; i++) {
|
||||||
|
let x = i
|
||||||
|
lis2[i].addEventListener('click', function () {
|
||||||
|
lis[x].style.color='#66ccff'
|
||||||
|
lis2[x].style.color='#3388BB'
|
||||||
|
High2.style.transform = `translateX(${x * 100}px)`
|
||||||
|
High.style.transform = `translateX(${x * 100}px)`
|
||||||
|
|
||||||
|
for (i = 0; i < lis.length; i++) {
|
||||||
|
if (i == x) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
lis[i].style.color='azure'
|
||||||
|
lis2[i].style.color='#000'}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body.onload = function () {
|
||||||
|
lis3.style.color='#66ccff'
|
||||||
|
lis1.style.color='#66ccff'
|
||||||
|
console.log(2)
|
||||||
|
}
|
||||||
|
const NavBar = document.querySelector('.NavBar')
|
||||||
|
const Top = document.querySelector('.Top')
|
||||||
|
Top.addEventListener('click',function(){
|
||||||
|
document.documentElement.scrollTop= 0
|
||||||
|
})
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
let n = document.documentElement.scrollTop
|
||||||
|
if (n >= 100) {
|
||||||
|
NavBar.style.opacity = '1'
|
||||||
|
NavBar.style.display = 'block'
|
||||||
|
Top.style.opacity = '1'
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
NavBar.style.opacity = '0'
|
||||||
|
Top.style.opacity = '0'
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
if (n == 0) NavBar.style.display = 'none'
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue