<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
script
src=
"./jquery-1.12.2.js"
>
<
/
script
>
</
head
>
<
style
>
* {
padding:
0;
margin:
0;
box-sizing:
border-box;
}
#box {
width:
100%;
height:
50px;
border:
1px
solid
#f00;
overflow:
hidden;
}
#box1 {
height:
50px;
border:
1px
solid
#f00;
}
#left {
height:
50px;
float:
left;
background:
#f00;
border:
1px
solid
#000;
}
#right {
width:
80px;
height:
50px;
float:
left;
background:
#0094ff;
}
<
/
style
>
<
body
>
<
div
id=
"box"
>
<
div
id=
"box1"
>
<
div
id=
"left"
>点击左滑
</
div
>
<
div
id=
"right"
>
<
span
>删除
</
span
>
<
span
>编辑
</
span
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
>
$(
function () {
// 获取元素
var
box =
document.
getElementById(
"box");
var
box1 =
document.
getElementById(
"box1");
var
left =
document.
getElementById(
"left");
var
right =
document.
getElementById(
"right");
// 让box1盒子的宽度等于box盒子的宽度奖赏right盒子的宽度
$(
box1).
width(
$(
box).
width() +
$(
right).
width());
// 让left盒子的宽度和box盒子一样
$(
left).
width(
$(
box).
width());
// 设置初始值
var
startx;
var
distance =
0;
var
leftlimit =
50;
var
rightlimit = -(
left.
offsetLeft -
left.
parentNode.
offsetLeft);
// 获取初始位置
left.
addEventListener(
"touchstart",
function (
e) {
if (
e.
targetTouches.
length >
1) {
return;
}
startx =
e.
targetTouches[
0].
clientX;
});
// 获取移动位置，然后根据移动的距离判断left盒子移动的距离
left.
addEventListener(
"touchmove",
function (
e) {
if (
e.
targetTouches.
length >
1) {
return;
}
movex =
e.
targetTouches[
0].
clientX;
movx =
movex -
startx +
distance;
if (
movx >
leftlimit) {
movx =
leftlimit;
$(
left).
animate({
marginLeft:
"0"
},
50);
}
else
if (
movx <
rightlimit -
leftlimit) {
movx =
rightlimit -
leftlimit;
$(
left).
animate({
marginLeft:
"-80px"
},
200)
}
})
// 获取结束位置，然后根据移动的距离distance判断left盒子移动的距离
left.
addEventListener(
"touchend",
function (
e) {
if (
e.
changedTouches.
length >
1) {
return;
}
endx =
e.
changedTouches[
0].
clientX;
diatance =
endx -
startx +
distance;
if (
distance >
0) {
distance =
0;
left.
style.
transform =
"translateX(" +
distance +
"px)";
}
else
if (
distance <
rightlimit) {
left.
style.
transform =
"translateX(" +
distance +
"px)";
}
})
})
<
/
script
>
</
html
>
<!-- 参考来源https://blog.csdn.net/smile_watermelon/article/details/46380921 -->