bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
历届学生/陈一航/项目/04-05/css/clear.css Normal file
View File

@@ -0,0 +1,5 @@
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}

40
历届学生/陈一航/项目/04-05/css/index.css Normal file
View File

@@ -0,0 +1,40 @@
body{
height: 5000px;
background-color: #9b9b9b;
}
.menu{
position: absolute;
top: 60px;
right: 100px;
width: 50px;
display: flex;
align-items: center;
flex-direction: column;
background-color: #c7c7c7;
border-radius: 15px;
box-sizing: border-box;
}
.fixed {
position: fixed;
top: 0;
right: 100px;
width: 50px;
display: flex;
align-items: center;
flex-direction: column;
background-color: #c7c7c7;
border-radius: 15px;
box-sizing: border-box;
}
.menu li{
padding: 0 8px;
text-align: center;
font-size: 13px;
height: 40px;
}
.bamenuli{
background-color: rgb(170, 73, 73);
}
.bamenul{
background-color: seagreen;
}

15
历届学生/陈一航/项目/04-05/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿淘宝右侧滚动切换激活样式</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ul class="menu">
</ul>
</body>
<script src="./js/index.js"></script>
</html>

54
历届学生/陈一航/项目/04-05/js/index.js Normal file
View File

@@ -0,0 +1,54 @@
var body = document.querySelector("body");
var Menu = document.querySelector(".menu");
var menus = {
status: 200,
result: {
menu: [
{ id: 1, menuli: '爱逛好货', min: 20, max: 60 },
{ id: 2, menuli: '好店直播', min: 70, max: 120 },
{ id: 3, menuli: '品质特色', min: 122, max: 172 },
{ id: 4, menuli: '实惠热卖', min: 173, max: 223 }
]
}
}
body.onscroll = function () {
var y = document.documentElement.scrollTop;
menus.result.menu.forEach(function(val,index){
if (val.min < y && y < val.max) {
Roll()
document.querySelectorAll(".menu li")[index].className = "bamenuli"
index == 0 ? document.querySelector("ul").className = "menu fixed" : ''
} else if (y<20){
document.querySelector("ul").className = "menu"
}
});
}
function Renderli() {
menus.result.menu.forEach( function(val,index) {
Menu.innerHTML += `<li class="${ index == 0 ? 'bamenuli' : ''}">${val.menuli}</li>`
} );
document.querySelectorAll(".menu li").forEach(function(val,index) {
val.onclick = function() {
if (menus.result.menu[index].min > 20) {
document.querySelector("ul").className = "menu fixed"
}
Roll()
val.className = "bamenuli"
document.documentElement.scrollTop = menus.result.menu[index].min
// console.log("index: ", index)
}
})
}
function Roll(){
var Menu = document.querySelectorAll(".menu li")
Menu.forEach(function(val,index){
val.className = ""
})
}
Renderli()