HTML5滑動(dòng)刪除功能是一種常見的網(wǎng)頁(yè)交互效果，在移動(dòng)端特別常見，可以讓用戶通過(guò)手勢(shì)滑動(dòng)的方式刪除或移動(dòng)列表項(xiàng)。

實(shí)現(xiàn)這種效果，需要使用HTML5的touch事件。我們可以在觸發(fā)touchstart事件后，記錄當(dāng)前滑動(dòng)的列表項(xiàng)的位置。然后在觸發(fā)touchmove事件時(shí)，計(jì)算出當(dāng)前滑動(dòng)的距離，將列表項(xiàng)按照滑動(dòng)的距離進(jìn)行偏移。最后在觸發(fā)touchend事件后，根據(jù)偏移的距離判斷是否刪除或移動(dòng)列表項(xiàng)。

<script type='text/javascript'>var startX, startY;
var onTouchStart = function(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
};
var onTouchMove = function(e) {
var dx = e.touches[0].clientX - startX;
var dy = e.touches[0].clientY - startY;
if (dx > 0 && Math.abs(dx) > Math.abs(dy)) {
var li = e.target.parentNode;
li.style.left = dx + 'px';
}
};
var onTouchEnd = function(e) {
var li = e.target.parentNode;
if (li.style.left < '-50px') {
li.parentNode.removeChild(li);
} else {
li.style.left = '0px';
}
};
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('touchstart', onTouchStart);
lis[i].addEventListener('touchmove', onTouchMove);
lis[i].addEventListener('touchend', onTouchEnd);
}
</script>

上面的代碼演示了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滑動(dòng)刪除列表項(xiàng)的功能。在這段代碼中，我們使用了三個(gè)事件監(jiān)聽函數(shù)，分別是touchstart、touchmove和touchend。在touchstart事件中，我們記錄了當(dāng)前列表項(xiàng)的位置。在touchmove事件中，我們計(jì)算出當(dāng)前列表項(xiàng)滑動(dòng)的距離，并進(jìn)行偏移。在touchend事件中，我們根據(jù)偏移的距離判斷是否刪除或移動(dòng)列表項(xiàng)。

當(dāng)然，這只是一個(gè)簡(jiǎn)單的例子，實(shí)際上，要實(shí)現(xiàn)一個(gè)完整的滑動(dòng)刪除功能，還需要考慮一些其他的問題，例如兼容性、多點(diǎn)觸控等等。不過(guò)，通過(guò)這個(gè)例子，可以初步了解到如何使用HTML5的touch事件來(lái)實(shí)現(xiàn)一個(gè)滑動(dòng)刪除功能。