h5無(wú)縫滾動(dòng)

<!DOCTYPE html>

<html>

<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無(wú)縫滾動(dòng)</title>

<style>

*{

margin:0;

padding:0;

list-style: none;

}

#box{

width:16rem;

height: 7.5rem;

overflow: hidden;

position: relative;

maring:0 auto;

}

#box ul{

width:96rem;

height: 7.5rem;

transform: translateX(-16rem);

}

#box ul li{

width:16rem;

height:7.5rem;

float: left;

font-size:2rem;

color: #fff;

line-height: 7.5rem;

text-align: center;

}

</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);

</script>

<script>

document.addEventListener('DOMContentLoaded',function(){

var oBox = document.getElementById('box');

var oUl = document.querySelector('#box ul');

var aLi = oUl.children;

var iNow = 1;

var x = -iNow*aLi[0].offsetWidth;

var bReady = true;

oUl.addEventListener('touchstart',function(ev){

if(bReady==false){return;}

bReady = false;

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;

//判斷是否移動(dòng)距離大于50

if(Math.abs(upX - downX)>50){

//左邊移動(dòng)

if(upX - downX<0){

iNow++;

if(iNow==aLi.length){iNow=aLi.length-1;}

}else{

//右邊移動(dòng)

iNow--;

if(iNow==-1){iNow=0;}

}

}

x = -iNow*aLi[0].offsetWidth;

oUl.style.transform = 'translateX('+x+'px)';

oUl.style.transition = '200ms all ease';

function tEnd(){

if(iNow==5){

iNow=1;

}

if(iNow==0){iNow=4;}

oUl.style.transition = 'none'

x = -iNow*aLi[0].offsetWidth;

oUl.style.transform = 'translateX('+x+'px)';

bReady = true;

}

oUl.addEventListener('transitionend',tEnd,false);

document.removeEventListener('touchend',fnEnd,false);

document.removeEventListener('touchmove',fnMove,false);

}

document.addEventListener('touchmove',fnMove,false);

document.addEventListener('touchend',fnEnd,false);

ev.preventDefault();

},false);

},false);

</script>

</head>

<body>

<div id="box">

<ul>

<li style ="background:green">3</li>

<li style="background: red;">0</li>

<li style="background: yellow;">1</li>

<li style="background: blue;">2</li>

<li style ="background:green">3</li>

<li style="background: red;">0</li>

</ul>

</div>

</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容