javascript - 做了个滑动插件，在chrome上模拟手机，感觉还不错，但是放到手机上明显有问题，只要滑动一点点，就移动好多~心塞！-PHP中文网问答

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<style type='text/css'>
    html,body{
        width: 500px;
        height:500px;
        overflow: hidden;
        margin: 0 auto;
        background:black;
    }
    .pSwrap{
        width: 2000px;
        height: 500px;
        position: relative;
        left:0px;
        transition:0.5s linear;
    }
    .pSwrap p{
        float: left;
        text-align: center;
        background: #ccc;
        width: 500px;
        line-height: 500px;
    }
</style>

</head>
<body>

<p class="pSwrap">
    <p class="img"><h1>1</h1></p>
    <p class="img"><h1>2</h1></p>
    <p class="img"><h1>3</h1></p>
    <p class="img"><h1>4</h1></p>
</p>
<script type="text/javascript" src='toch.js'></script>

</body>
</html>

js代码如下：

function touchSlide(objectClassName,aImgClassName,zoom){

var op=document.getElementsByClassName(objectClassName)[0]; 
var endX;//滑动结束时的X轴坐标
var startX;//滑动开始时deX轴坐标
var scroll;//滑动滚出去的距离
var index=0;//当前显示的第几个p;从0开始计算;
var aImg=document.getElementsByClassName(aImgClassName);
var imgLength=aImg.length;
var aImgWidth=aImg[0].offsetWidth*(imgLength-1);
var imgWidth=aImg[0].offsetWidth;

op.addEventListener("touchstart",function(e){
    var touch=e.touches[0];
    startX=touch.pageX;
});

op.addEventListener("touchmove",function(e){
    var touch=e.touches[0];
    var moveLeft=op.offsetLeft;//滑动时的当前Left的距离;
        endX=touch.pageX;
        scroll=endX-startX;
        //console.log(scroll);
        op.style.left=moveLeft+scroll+'px';
});

op.addEventListener("touchend",function(e){
    var endLeft=op.offsetLeft;
    if(endLeft>0){
        op.style.left=0+'px';
    }else if(endLeft<-aImgWidth){
        op.style.left=-aImgWidth+'px';
    }else{
        var scrollPercent=Math.abs(scroll)/imgWidth;

        if(scrollPercent>zoom){
            if(scroll<0){//往左滑动
                index++;
                index=index>(imgLength-1)? index-1: index;
                op.style.left=-imgWidth*index+'px';    
            }else if(scroll>0){//往右滑动
                index--;
                index=index<0? 0: index;
                op.style.left=-imgWidth*index+'px';
            }
        }else{
            op.style.left=-imgWidth*index+'px';
        }
    }
});

}

touchSlide('pSwrap','img',0.2);

请各位提个好点的建议！如果可以顺便提个好点的思路。我觉得哈，这里最关键的就是如何判断当前滑动的是第几张，要往哪滑，以实现序号的增减，我的思路方法已经有了，但是感觉代码写的不完美，特别是在手机上运行的时候感觉不大好~

var op=document.getElementsByClassName(objectClassName)[0]; var endX;//滑动结束时的X轴坐标 var startX;//滑动开始时deX轴坐标 var scroll;//滑动滚出去的距离 var index=0;//当前显示的第几个p;从0开始计算; var aImg=document.getElementsByClassName(aImgClassName); var imgLength=aImg.length; var aImgWidth=aImg[0].offsetWidth*(imgLength-1); var imgWidth=aImg[0].offsetWidth; op.addEventListener("touchstart",function(e){ var touch=e.touches[0]; startX=touch.pageX;

op.addEventListener("touchmove",function(e){ var touch=e.touches[0]; var moveLeft=op.offsetLeft;//滑动时的当前Left的距离; endX=touch.pageX; scroll=endX-startX; //console.log(scroll); op.style.left=moveLeft+scroll+'px'; }); op.addEventListener("touchend",function(e){ var endLeft=op.offsetLeft; if(endLeft>0){ op.style.left=0+'px'; }else if(endLeft<-aImgWidth){ op.style.left=-aImgWidth+'px'; }else{ var scrollPercent=Math.abs(scroll)/imgWidth; if(scrollPercent>zoom){ if(scroll<0){//往左滑动 index++; index=index>(imgLength-1)? index-1: index; op.style.left=-imgWidth*index+'px'; }else if(scroll>0){//往右滑动 index--; index=index<0? 0: index; op.style.left=-imgWidth*index+'px'; } }else{ op.style.left=-imgWidth*index+'px'; } } op.removeEventListner('touchmove'); op.removeEventListner('touchend'); }); });

全部回复(4)

伊谢尔伦2017-04-10 17:57:57 4楼

移动浏览器上要加上下面的meta标签，才能让像素对齐
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
将touchmove和touchend的监听放到touchstart时候才绑定
在touchend时将touchmove和touchend解绑

你的逻辑有问题，在touchmove的时候，不是减去刚触摸的坐标
应该在触摸移动一次就要更新开始的坐标

赞 +0

添加回复