phpstudy集成环境

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

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

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;
    }
    .divSwrap{
        width: 2000px;
        height: 500px;
        position: relative;
        left:0px;
        transition:0.5s linear;
    }
    .divSwrap div{
        float: left;
        text-align: center;
        background: #ccc;
        width: 500px;
        line-height: 500px;
    }
</style>

</head>
<body>

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

</body>
</html>

js代码如下：

function touchSlide(objectClassName,aImgClassName,zoom){

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

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

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

oDiv.addEventListener("touchend",function(e){
    var endLeft=oDiv.offsetLeft;
    if(endLeft>0){
        oDiv.style.left=0+'px';
    }else if(endLeft<-aImgWidth){
        oDiv.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;
                oDiv.style.left=-imgWidth*index+'px';    
            }else if(scroll>0){//往右滑动
                index--;
                index=index<0? 0: index;
                oDiv.style.left=-imgWidth*index+'px';
            }
        }else{
            oDiv.style.left=-imgWidth*index+'px';
        }
    }
});

}

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

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

移动浏览器上要加上下面的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的时候，不是减去刚触摸的坐标
应该在触摸移动一次就要更新开始的坐标

html和body宽度建议用js获取。。。加上meta viewport后手机上宽度一般没有500px那么宽

还有建议用translate3d 硬件加速性能好些。

可以使用开源的iSlider，效果很好～

function touchSlide(objectClassName,aImgClassName,zoom){

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

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

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

oDiv.addEventListener("touchend",function(e){
    var endLeft=oDiv.offsetLeft;
    if(endLeft>0){
        oDiv.style.left=0+'px';
    }else if(endLeft<-aImgWidth){
        oDiv.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;
                oDiv.style.left=-imgWidth*index+'px';    
            }else if(scroll>0){//往右滑动
                index--;
                index=index<0? 0: index;
                oDiv.style.left=-imgWidth*index+'px';
            }
        }else{
            oDiv.style.left=-imgWidth*index+'px';
        }
    }

    oDiv.removeEventListner('touchmove');
    oDiv.removeEventListner('touchend');

});
});

}

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

这样了，感觉还是不行 meta也加了

【热门文章】
【热门文章】