<html lang="en">
<head>
<meta charSet="UTF-8">
<title>Title</title>
<style>
.cart-list {
padding: 4px;
}
.cart-item {
position: relative;
width: 100%;
margin-top: 30px;
}
.product-info {
display: flex;
border: 1px solid red;
background-color: cadetblue;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.del-card {
border: 1px solid green;
border-radius: 10px;
align-items: center;
text-align: center;
width: 70px;
height: 88px;
position: absolute;
right: 0;
top: 0;
background-color: #ff6700;
color: #ffffff;
flex-direction: column;
justify-content: center;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
transition: all 0.3s;
}
.show-del-card {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<div class="cart-list">
<div class="cart-item">
<div class="product-info">
<div>
<img src="GY32K73UWDWMT-7.jpg" alt="" style="max-height: 80px">
</div>
<div>
<h3>
得力(deli)A4书写板夹 金属强色写板夹 金属强力夹塑料文件夹 多功能写字垫板 办公用品64502灰色
</h3>
<span>¥</span>7.5
</div>
</div>
<div class="del-card">
Delete
</div>
</div>
<div class="cart-item">
<div class="product-info">
<div>
<img src="GY32K73UWDWMT-7.jpg" alt="" style="max-height: 80px">
</div>
<div>
<h3>
得力(deli)A4书写板夹 金属强色写板夹 金属强力夹塑料文件夹 多功能写字垫板 办公用品64502灰色
</h3>
<span>¥</span>7.5
</div>
</div>
<div class="del-card">
Delete
</div>
</div>
</div>
<script>
let cartItems = document.querySelectorAll('.cart-item');
let startX;
let endX;
cartItems.forEach(item => {
item.addEventListener('touchstart', handleTouchStart, false);
item.addEventListener('touchmove', handleTouchMove, false);
item.addEventListener('touchend', handleTouchEnd, false);
});
function handleTouchStart(event) {
startX = event.changedTouches[0].clientX;
console.log("start", startX);
}
function handleTouchMove(event) {
}
function handleTouchEnd(event) {
endX = event.changedTouches[0].clientX;
console.log("end", endX);
//查找当前对象所对应的product-info对象
const productInfo = event.currentTarget.querySelector('.product-info');
const delCard = event.currentTarget.querySelector('.del-card');
if (endX < startX) {
productInfo.style.transform = 'translateX(-70px)';
delCard.classList.add('show-del-card');
} else if (endX > startX) {
productInfo.style.transform = 'translateX(0)';
delCard.classList.remove('show-del-card');
}
}
// 给class为del-card的元素绑定点击事件
document.querySelector('.del-card').addEventListener('click', function () {
alert("删除");
})
</script>
</body>
</html>
View Code
标签：左滑,translateX,transform,购物车,item,del,h5,event,card From： https://www.cnblogs.com/thcn/p/17823541.html