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

200
历届学生/front-end-team-11/项目开发/上课项目/js案例/侧滑.html Normal file
View File

@@ -0,0 +1,200 @@
<!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;
}
ul {
overflow: hidden;
}
li {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid #ebe8e8;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
position: relative;
}
.action {
color: #fff;
font-size: 14px;
width: 165px;
display: flex;
height: 100%;
position: absolute;
right: -165px;
}
.action div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.action .top {
background: #009bfe;
}
.action .read {
background: #fe8d3f;
}
.action .delt {
background: #ff5967;
}
</style>
</head>
<body>
<ul>
<li>
测试1
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试2
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试3
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
</ul>
</body>
<script>
// 0 关闭状态 -165 打开状态
let startX = 0, leftXArr = [];
_("ul li").forEach(function (v, i) {
v.ontouchstart = function (e) {
startX = e.touches[0].clientX
_("ul li").forEach(function (item, j) {
if (i != j) {
item.style = `
transform: translateX(0px);
`
}
})
}
v.ontouchmove = function (e) {
let moveX = e.touches[0].clientX
// 左滑moveX 小于 startX， 右滑 大于
// 左滑
if (determineDirection(moveX, startX)) {
// console.log("左滑: ", moveX);
let currentX = v.style.transform.replace(/[^0-9]/ig, '')
if (-currentX != -165) {
console.log(222);
v.style = `
transform: translateX(-${startX - moveX > 165 ? '165' : startX - moveX}px);
`
} else {
leftXArr.push(moveX)
console.log("leftXArr: ", leftXArr);
if (leftXArr[leftXArr.length - 1] > leftXArr[leftXArr.length - 2]) {
leftXArr = []
console.log("左边的右滑动");
let x = -165 + (leftXArr[leftXArr.length - 1] - leftXArr[0]);
v.style = `
transform: translateX(${x}px);
`
} else {
console.log("左边的左滑动");
}
}
v.open = true
} else {
console.log("右滑");
if (v.open) {
let x = -165 + (moveX - startX);
v.style = `
transform: translateX(${x > 0 ? 0 : x}px);
`
}
}
}
v.ontouchend = function (e) {
let endX = e.changedTouches[0].clientX
if (determineDirection(endX, startX)) {
if ((startX - endX) < 55) {
v.style = `
transform: translateX(0px);
`;
v.open = false
} else {
v.style = `
transform: translateX(-165px);
`
}
} else {
if ((endX - startX) < 55 && endX != startX) {
v.style = `
transform: translateX(-165px);
`
} else {
v.style = `
transform: translateX(0px);
`
v.open = false
}
}
}
})
// x1 moveX x2 startX true 左滑 false 右滑
function determineDirection(x1, x2) {
return x1 < x2 ? true : false
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>