標籤：
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function(){
function setFont(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/16+‘px‘;
}
setFont();
window.addEventListener(‘resize‘,setFont,false)
})();
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
}
#box{
width: 100%;
}
#sec{
width: 100%;
}
#flesh{
width: 100%;
height: 0;
overflow: hidden;
text-align: center;
}
#tab{
width: 100%;
overflow: hidden;
}
#pic{
width: 700%;
display: -webkit-box;
}
#pic li{
-webkit-box-flex:1;
height: 8.5rem;
}
#pic li img{
width: 100%;
height: 100%;
}
</style>
<script>
window.addEventListener(‘DOMContentLoaded‘,function(){
var oP=document.getElementById(‘pic‘);
var aLi=oP.children;
var iNow=1;
var dir=‘‘;
var bOK=false;
var timer;
var x=-iNow*aLi[0].offsetWidth;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
oP.addEventListener(‘touchstart‘,function(ev){//1.先寫基本拖拽
if(bOK)return;//如果拖動過快 會導致露白 所以用開關來限制拖拽狀態 用運動狀態監聽 只有監聽到運動完成了以後 才能繼續拖動 痛點是何時上鎖 也就是bOK=true 1.滑鼠點下的時候為true(上鎖) 如果只是點擊而沒有拖動的話 也會上鎖 但運動監聽不到運動的結束 從而無法解鎖(bOK=false) 繼而不能繼續拖動 同時 點下就上鎖的話 繼續點擊會發生return 下面的事件都無法執行2.運動的時候上鎖 但只是點下而不是左右拖動 是上下拖動的話也會導致無法解鎖 所以 只有在運動時候判斷是否為左右拖動 當確定為左右拖動的時候 才上鎖 也就是bOK=true
oP.style.webkitTransition=‘none‘;//每次move都會有過渡狀態 所以點擊的時候要先幹掉過渡狀態
clearInterval(timer)
var startX=ev.targetTouches[0].pageX;
var startY=ev.targetTouches[0].pageY;
var disX=startX-x;
function move(ev){
var moveX=ev.targetTouches[0].pageX;
var moveY=ev.targetTouches[0].pageY;
if(dir){//4.滑動鎖定 用移動後的座標值減去初始的座標值 一開始dir為空白 走else
if(dir==‘l2r‘){
bOK=true;
x=moveX-disX;
}
}else{
if(Math.abs(moveX-startX)>10){//如果橫向拖動大於某個值 就判定是橫向拖拽 然後返回到if去 並且dir=l2r成立 進而給位移x賦值 從而實現只能橫向拖動
dir=‘l2r‘;
}else if(Math.abs(moveY-startY)>10){
dir=‘t2b‘
}
}
//oP.style.webkitTransition=‘0.5s all ease‘;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
}
function end(ev){
document.removeEventListener(‘touchmove‘,move,false);
document.removeEventListener(‘touchend‘,end,false);
if(dir==‘l2r‘){
if(Math.abs(ev.changedTouches[0].pageX-startX)>50){//2.滑鼠鬆開後 進行判斷 如果左位移/右位移大於50的話 自動移動
if(ev.changedTouches[0].pageX-startX>0){
iNow--;
}else if(ev.changedTouches[0].pageX-startX<0){
iNow++;
}
}
}
oP.style.webkitTransition=‘0.5s all ease‘;
x=-iNow*aLi[0].offsetWidth;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
dir=‘‘;
timer=setInterval(function(){
iNow++;
oP.style.webkitTransition=‘0.5s all ease‘;
if(iNow==aLi.length){
iNow=1;
oP.style.webkitTransition=‘none‘;
}
x=-iNow*aLi[0].offsetWidth;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
},1000)
}
document.addEventListener(‘touchmove‘,move,false);
document.addEventListener(‘touchend‘,end,false)
ev.preventDefault();
},false)
oP.addEventListener(‘transitionend‘,function(){//3.監聽運動狀態 並在監聽完成以後進行iNow判斷
bOK=false;
if(iNow==0){
iNow=aLi.length-2
}
if(iNow==aLi.length-1){
iNow=1
}
oP.style.webkitTransition=‘none‘;//瞬間拖拽回去 不能加運動狀態
x=-iNow*aLi[0].offsetWidth;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
},false)
timer=setInterval(function(){
iNow++;
oP.style.webkitTransition=‘0.5s all ease‘;
if(iNow==aLi.length){
iNow=1;
oP.style.webkitTransition=‘none‘;
}
x=-iNow*aLi[0].offsetWidth;
oP.style.webkitTransform=‘translateX(‘+x+‘px)‘;
},1000)
//5.寫loading狀態的拖拽
var oSec=document.getElementById(‘sec‘);
var oFlesh=document.getElementById(‘flesh‘);
var y=0;
oSec.addEventListener(‘touchstart‘,function(ev){
oFlesh.style.webkitTransition=‘none‘;//每次move的時候都有過渡狀態webkitTransition 所以當點擊的時候幹掉上一次的過渡狀態
var startY=ev.targetTouches[0].pageY;
var disY=startY-y;
function move(ev){
var moveY=ev.targetTouches[0].pageY;
y=moveY-disY;
if(dir==‘t2b‘){//判斷只有上下拖動的時候 才給賦值
if(y>=100){
y=100;
}
oFlesh.style.webkitTransition=‘0.5s all ease‘
oFlesh.style.height=y+‘px‘;
}
}
function end(){
document.removeEventListener(‘touchmove‘,move,false);
document.removeEventListener(‘touchend‘,end,false);
oFlesh.style.height=0+‘px‘;//鬆開滑鼠後恢複原來狀態
}
document.addEventListener(‘touchmove‘,move,false);
document.addEventListener(‘touchend‘,end,false);
ev.preventDefault();
},false)
},false)
</script>
<body>
<section id="box">
<section id="sec">
<div id="flesh">
<img src="img/1.gif" >
</div>
<section id="tab">
<ul id="pic">
<li><img src="img/4.jpg" ></li>
<li><img src="img/0.jpg" ></li>
<li><img src="img/1.jpg" ></li>
<li><img src="img/2.jpg" ></li>
<li><img src="img/3.jpg" ></li>
<li><img src="img/4.jpg" ></li>
<li><img src="img/0.jpg" ></li>
</ul>
</section>
</section>
</section>
</body>
</html>
移動端的無縫滾動+下拉重新整理+定向滑動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
