html5滑动删除置顶效果,JS实现手机端左滑动出现删除按钮效果

手机端左滑动超过一定距离显示功能按钮，右滑动或点击其他地方隐藏

;(function (window) {

window.mymethod = {};

/*

* @method: slideToShow 移动端左滑动显示功能(如删除)，右滑动隐藏

* @params: 1. Object 需要滑动Dom元素

* 2. Number 滑动超过这个距离定位到最终位置，未超过吸附回去

* 3. Number 最终定位位置

* @return: 无

* */

mymethod.slideToShow = function (dom, maxdistance, finalposition) {

/*记录起始 刚刚触摸的点的位置 x的坐标*/

var startX = 0,

/*滑动的时候x的位置*/

moveX = 0,

/*滑动的距离*/

distanceX = 0,

/*是否滑动过*/

isMove = false,

/*当前位置*/

currentX = 0;

/*公用方法*/

/*加过渡*/

var addTransition = function () {

dom.style.transition = "all 0.3s";

dom.style.webkitTransition = "all 0.3s";

};

/*清除过渡*/

var removeTransition = function () {

dom.style.transition = "none";

dom.style.webkitTransition = "none";

};

/*定位*/

var setTranslateX = function (translateX) {

dom.style.transform = "translateX(" + translateX + "px)";

dom.style.webkitTransform = "translateX(" + translateX + "px)";

};

dom.addEventListener('touchstart', function (e) {

startX = e.touches[0].clientX;

});

/*

* 1. 左滑动时，判断滑动距离，如果超过一定距离，定位到最终位置，如果没有，吸附回去

* 左为负值

* 2. 右滑动时，首先判断元素是否有滑动值，如果没有，不滑动。如果有，判断滑动距离如果超过一定距离，定位0，如果没有，定位到滑动前位置

* 右为正值

* */

dom.addEventListener('touchmove', function (e) {

/*滑动时候的X*/

moveX = e.touches[0].clientX;

/*计算移动的距离*/

distanceX = moveX - startX;

/*左滑*/

if (distanceX < 0) {

/*清除过渡*/

removeTransition();

/*左滑动范围 -finalposition 到 0*/

if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {

/*实时的定位*/

setTranslateX(currentX + distanceX);

}

/*证明滑动过*/

isMove = true;

} else if (distanceX > 0) {

/*右滑*/

/*如果当前定位为0 不滑动*/

if (currentX == 0) {

return false;

} else {

/*当前定位不为0 右滑动范围 -finalposition 到 0*/

if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {

/*实时的定位*/

setTranslateX(currentX + distanceX);

}

}

/*证明滑动过*/

isMove = true;

} else {

return false;

}

});

/*在模拟器上模拟的滑动会有丢失的情况 在模拟器的时候用window绑定touchend事件观察效果*/

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

if (isMove && Math.abs(distanceX) > maxdistance) {

/*当滑动超过了一定的距离 需要 定位到最终位置*/

/*加过渡*/

addTransition();

/*定位*/

if (distanceX < 0) { // 左滑

setTranslateX(-finalposition);

currentX = -finalposition;

} else { // 右滑

setTranslateX(0);

currentX = 0;

}

} else if (isMove && Math.abs(distanceX) <= maxdistance) {

/*当滑动的距离不超过一定的距离的时候 需要吸附回去 */

/*加过渡*/

addTransition();

/*定位*/

if (distanceX < 0) { // 左滑

setTranslateX(0);

currentX = 0;

} else { // 右滑

setTranslateX(-finalposition);

currentX = -finalposition;

}

} else {

return false;

}

/*重置参数*/

startX = 0;

moveX = 0;

distanceX = 0;

isMove = false;

});

/*点击页面任何部位，滑动回去*/

document.addEventListener('click', function () {

/*加过渡*/

addTransition();

/*定位*/

setTranslateX(0);

});

}

})(window);