今天在公司遇到做一个移动端手指滑动的效果，刚開始用了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 {
1150px;
height: 150px;
background: red;
position: absolute;
left: 0px;
}
.id {
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