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