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

219
历届学生/font-end-nine/项目练习/上课项目/js案例/下拉滚动代码/index.html Normal file
View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉刷新</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.header img {
width: 20px;
height: 20px;
}
.content {
margin-top: 45px;
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="header">
<img src="./back.png" alt="">
<span>热门视频</span>
<span></span>
</div>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="./refresh.png" alt="">
</div>
</body>
<script>
var startY = 0, moveY = 0, endY = 0;
if (isTop()) {
addMove();
} else {
window.addEventListener('scroll', () => isTop() ? addMove() : '')
}
function addMove() {
$(".content").addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY
});
$(".content").addEventListener('touchmove', (e) => {
if (isTop()) {
moveY = e.targetTouches[0].pageY;
if (moveY > startY) {
// 必须要阻止默认事件，如果不阻止会和页面的滚动相互冲突
e.preventDefault();
var sTop = moveY - startY;
if (sTop <= 120) {
$(".refresh").style = `
top: ${sTop}px;
transform: rotate(${sTop * 3}deg);
`;
}
}
}
});
$(".content").addEventListener('touchend', (e) => {
endY = e.changedTouches[0].pageY;
var eTop = endY - startY;
if (eTop <= 60) {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
} else {
$(".refresh").className = "refresh rotate"
$(".refresh").style = `
top: 80px;
transform: rotate(0}deg);
`;
setTimeout(() => {
$(".refresh").style = `
top: 10px;
transform: rotate(0deg);
`;
$(".refresh").className = "refresh"
}, 2000)
}
});
}
function isTop() {
return document.documentElement.scrollTop === 0 ? true : false
}
function $(className) {
return document.querySelector(className)
}
</script>
</html>