HTML5 左右滑動的實現方法
HTML5中可以使用touch事件來實現左右滑動效果。下面是一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<title>左右滑動</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById('box');
var xStart = 0; //觸摸起始位置
var xEnd = 0; //觸摸結束位置
box.addEventListener('touchstart', function(event) {
xStart = event.touches[0].pageX;
});
box.addEventListener('touchend', function(event) {
xEnd = event.changedTouches[0].pageX;
if(xEnd - xStart >50) { //向右滑動
box.style.left = '20px';
} else if(xStart - xEnd >50) { //向左滑動
box.style.left = '180px';
}
});
</script>
</html>上面的代碼實現了一個綠色的正方形塊，當手指向左滑動超過50像素時，正方形塊會移至右邊；當手指向右滑動超過50像素時，正方形塊會移至左邊。這是一個基本的左右滑動實現方法。