您的位置：首页 > 移动开发

移动开发，touchstart轮播图，移动端拖拽应用

2016-06-20 21:17 309 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>和派孔明</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{position:relative;width:320px;height:150px;
background:#ccc;margin:0 auto;overflow:hidden;}
#div1 ul{position:absolute;left:0;top:0;width:3200px;
height:150px;}
#div1 ul li{float:left;width:320px;height:100%;line-height:150px;text-align:center;font-size:20px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var oUl  = oDiv.children[0];
var aLi  = oUl.children;
var len  = aLi.length;
oUl.addEventListener("touchstart",function(ev){
//取消运动
oUl.style.transition = "none";
var disX = ev.targetTouches[0].pageX - oUl.offsetLeft;
function fnMove(ev){
oUl.style.left = ev.targetTouches[0].pageX - disX + "px";
}
function fnEnd(){
oUl.removeEventListener("touchmove",fnMove,false);
oUl.removeEventListener("touchend",fnEnd,false);
//确定显示第几个
var n = Math.round(-oUl.offsetLeft/aLi[0].offsetWidth);
if(n < 0){
n = 0;
} else if(n >= len){
n = len - 1;
}
console.log(n);
//添加运动 transition:0.7s all ease;
oUl.style.transition = "0.7s all ease";
oUl.style.left = -n*aLi[0].offsetWidth + "px";
}
oUl.addEventListener("touchmove",fnMove,false);
oUl.addEventListener("touchend",fnEnd,false);
ev.preventDefault();
},false);
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li style="background:#F3dab9;">0</li>
<li style="background:#Fdfab9;">1</li>
<li style="background:#F3ABF9;">2</li>
<li style="background:#3AFBF9;">3</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航