<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width:16rem;
height:7.5rem;
position: relative;
}
#ul1{
width:64rem;
height: 7.5rem;
position: absolute;
left:0;
top: 0;
}
#ul1 li{
width:16rem;
height:7.5rem;
float: left;
font-size:2rem;
color: #fff;
line-height: 7.5rem;
text-align: center;
list-style: none;
}
</style>
<script>
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=doc.documentElement.clientWidth*20/320+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document);
window.addEventListener('DOMContentLoaded',function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var x=0;
var iNow=0;
oUl.addEventListener('touchstart',function(ev){
oUl.style.transition='none';
var disX=ev.targetTouches[0].pageX-x;
var downX=ev.targetTouches[0].pageX;
function fnMove(ev){
x=ev.targetTouches[0].pageX-disX;
oUl.style.transform='translateX('+x+'px)';
}
function fnEnd(ev){
var upX=ev.changedTouches[0].pageX;
if(Math.abs(upX - downX)>50){
if(upX -downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1}
}else{
iNow--;
if(iNow==-1){
iNow=0;
}
}
}
x=-iNow*aLi[0].offsetWidth;
oUl.style.transform='translateX('+x+'px)';
oUl.style.transition='200ms all ease';
document.removeEventListener('touchmove',fnMove,false);
document.removeEventListener('touchend',fnEnd,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
ev.preventDefault();
},false);
},false);
</script>
</head>
<body>
<div>
<ul id="ul1">
<li style="background: red">1</li>
<li style="background: yellow">2</li>
<li style="background: green">3</li>
<li style="background: blue">4</li>
</ul>
</div>
</body>
</html>
网友评论