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

182
历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/js/chehua.html Normal file
View File

@@ -0,0 +1,182 @@
<!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;
transition-duration: 0.1s;
transition-duration: 0.1s;
transition: all 0.2s;
}
.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>
function $(name) {
return document.querySelector(name);
}
function _(name) {
return document.querySelectorAll(name);
}
_("ul li").forEach(function (v, i) {
let startx, leftXArr = [],entt;
//手指按下事件
v.ontouchstart = function (e) {
startx = e.touches[0].clientX;
console.log("屏幕按下坐标：" + startx)
_("ul li").forEach(function (item, j) {
if (i != j) {
item.style = `
transform: translateX(0px);
`
}
})
}
//手指移动事件
let pp = 0;
let eq = 0;
v.ontouchmove = function (e) {
let hmovex = e.touches[0].clientX;
leftXArr.push(hmovex);
// console.log("屏幕移动坐标：" + leftXArr);
let df = leftXArr[0] - leftXArr[leftXArr.length - 1];
// let df1=leftXArr[leftXArr.length-1]-leftXArr[leftXArr.length-2];
console.log("移动的px：" + df)
if (df >= 0 && df <= 165) {
v.style = `
transform: translateX(-${df}px);
`
} else if (df < 0) {
v.style = `
transform: translateX(0px);
`
leftXArr = []
}
else {
// pp+=1
// let dfx=(df-(df-165+pp));
// console.log("pp"+pp)
// // leftXArr = []
// if(leftXArr[leftXArr.length-1]>leftXArr[leftXArr.length-2]){
// console.log("值"+dfx)
// console.log("进来了")
// v.style = `
// transform: translateX(-${dfx}px);
// `
// }else{
v.style = `
transform: translateX(-165px);
`
// }
}
// console.log(leftXArr.length)
}
//手指拿起事件
v.ontouchend = function (e) {
entt= e.changedTouches[0].clientX
if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 55 && leftXArr[leftXArr.length - 1] - leftXArr[leftXArr.length - 2] < 0&&startx!=entt) {
v.style = `
transform: translateX(-165px);
`
} else if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 110) {
v.style = `
transform: translateX(-165px);
`
}
else {
v.style = `
transform: translateX(-0px);
`
leftXArr = []//数组清空
}
}
})
</script>
</html>