html5向左滑动删除特效

* {

padding: 0;

margin: 0;

list-style: none;

}

header {

background: #f7483b;

border-bottom: 1px solid #ccc

}

header h2 {

text-align: center;

line-height: 54px;

font-size: 16px;

color: #fff

}

.list-ul {

overflow: hidden

}

.list-li {

line-height: 60px;

border-bottom: 1px solid #fcfcfc;

position: relative;

padding: 0 12px;

color: #666;

background: #f2f2f2;

-webkit-transform: translateX(0px);

}

.btn {

position: absolute;

top: 0;

right: -80px;

text-align: center;

background: #ffcb20;

color: #fff;

width: 80px

}

/*

* 描述：html5苹果手机向左滑动删除特效

*/

window.addEventListener('load', function() {

var initX; //触摸位置

var moveX; //滑动时的位置

var X = 0; //移动距离

var objX = 0; //目标对象位置

window.addEventListener('touchstart', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

initX = event.targetTouches[0].pageX;

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

}

if (objX == 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X >= 0) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

} else if (X < 0) {

var l = Math.abs(X);

obj.style.WebkitTransform = "translateX(" + -l + "px)";

if (l > 80) {

l = 80;

obj.style.WebkitTransform = "translateX(" + -l + "px)";

}

}

}

});

} else if (objX < 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X >= 0) {

var r = -80 + Math.abs(X);

obj.style.WebkitTransform = "translateX(" + r + "px)";

if (r > 0) {

r = 0;

obj.style.WebkitTransform = "translateX(" + r + "px)";

}

} else { //向左滑动

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

}

}

});

}

})

window.addEventListener('touchend', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

if (objX > -40) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

objX = 0;

} else {

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

objX = -80;

}

}

})

})

消息列表

• 你的快递到了，请到楼下签收

  删除

• 哇，你在干嘛，快点来啊就等你了

  删除

写一个js向左滑动删除 交互特效的插件——Html5 touchmove

需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

android QQ消息左滑动删除实例(优化版SwipeListViewEX)

仿 QQ消息左滑动删除item消息实例 源代码参考:http://blog.csdn.net/gaolei1201/article/details/42677951 自己作了一些调整,全部代码下载地址 ...

iOS边练边学--简单的数据操作&lpar;增、删、改&rpar;，左滑动删除和弹窗

一.数据刷新的原则: 通过修改模型数据,来修改tableView的展示 先修改数据模型 在调用数据刷新方法 不要直接修改cell上面子控件的属性 二.增删改用到的方法: <1>重新绑定屏幕 ...

Taro框架---左滑动删除

index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

IOS uitableviewcell 向左滑动删除编辑等

主要实现这个方法就好了 -(NSArray *)tableView:(UITableView *)tableView editActions ...

IOS UITableViewUITableView小技巧--实现cell向左滑动删除&comma;编辑等功能

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return Y ...

微信小程序左滑删除功能

效果图如下: wxml代码: /** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWi ...

js 类似于移动端购物车删除，左移动删除