手機端左滑動超過一定距離顯示功能按鈕，右滑動或點選其他地方隐藏
;(function (window) {
window.mymethod = {};
mymethod.slideToShow = function (dom, maxdistance, finalposition) {
var startX = 0,
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;
});
dom.addEventListener('touchmove', function (e) {
moveX = e.touches[0].clientX;
distanceX = moveX - startX;
if (distanceX < 0) {
removeTransition();
if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {
setTranslateX(currentX + distanceX);
}
isMove = true;
} else if (distanceX > 0) {
if (currentX == 0) {
return false;
} else {
if (-finalposition < (currentX + distanceX) && (currentX + distanceX) < 0) {
setTranslateX(currentX + distanceX);
}
}
isMove = true;
} else {
return false;
}
});
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);