今天在公司遇到做一個移動端手指滑動的效果，剛開始用了swiper.js插件發現效果不好（文字存在模糊效果）。后來查了一些資料，自己手寫了一個使用原生js寫的滑動效果。
以下直接上代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>Document</title>
<style>
#id {
width: 1150px;
height: 150px;
background: red;
position: absolute;
left: 0px;
}
.id {
width: 40px;
height: 150px;
background: green;
border: solid 1px grey;
float: left;
}
</style>
</head>
<body>
<div id="inp"></div>
<div id="id" style="left:0px;">
<div class="id">1</div>
<div class="id">2</div><div class="id"></div><div class="id"></div><div class="id"></div><div class="id"></div>
</div>
</body>
<script>
function load (){
/*單指拖動*/
var obj = document.getElementById('id');
obj.addEventListener("touchstart", function(event) {
var touch = event.targetTouches[0];
var left = parseInt(obj.style.left);
// alert(left);
var x = touch.pageX - left;
var y = touch.pageY - left;
obj.addEventListener('touchmove', function(event) {
// 假設這個元素的位置內僅僅有一個手指的話
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止瀏覽器默認事件，重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX - x + 'px';
// obj.style.top = touch.pageY + 'px';
}
}, false);
});
obj.addEventListener("touchend",function(){
obj.removeEventListener("touchstart");
obj.removeEventListener("touchmove");
});
}
window.addEventListener('load',load, false);
</script>
</html>
另一個關於
【html5構建觸屏站點】之touch事件
的鏈接地址，有興趣的大家能夠去看一下：
http://www.cnblogs.com/shawn-xie/archive/2012/12/07/2805582.html