写一个js向左滑动删除 交互特效的插件 删除事件怎么添加

JavaScript016

写一个js向左滑动删除 交互特效的插件 删除事件怎么添加,第1张

使用了h5的touchmove等事件，以及用js动态改变css3的translate属性来达到动画效果：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

<title>html5向左滑动删除特效</title>

<style>

* {

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

}

</style>

<script>

/*

* 描述：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

}

}

})

})

</script>

</head>

<body>

<header>

<h2>消息列表</h2>

</header>

<section class="list">

<ul class="list-ul">

<li id="li" class="list-li">

<div class="con">

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

</div>

<div class="btn">删除</div>

</li>

<li class="list-li">

<div class="con">

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

</div>

<div class="btn">删除</div>

</li>

</ul>

</section>

</body>

</html>

这是自己封装的原生js方法，为了偷懒，用了电jqurey。调用方法如下：

touchs._left(object)//往左滑动，

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明：object的取值可以是一个id("#id")表达式，或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等，只要可以用jqurey通过这个表达式获取到dom对象，这个表达式怎么写都可以。

<script>

var show = 0

function leftRun(){

show-=100

document.getElementById("b").style.marginLeft = show+"px"

}

function leftRun(){

show+=100

document.getElementById("b").style.marginRight= show+"px"

}

</script>

<div id="a" width="500">

<div id="b" width="1000">

正文内容

</div>

</div>

<input type="button" id="leftRun" onclick="leftRun()" />

<input type="button" id="rightRun" onclick="rightRun()" />