京东移动端侧边栏触摸事件

<!DOCTYPE html>
<html>
<head lang="en">
    <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"/>
    <title>京东侧边栏触摸事件-手机模式测试</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        a,a:hover{
            color: #333;
            text-decoration: none;
            display: block;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .box{
            height: 500px;
            margin: 30px auto;
            width: 90px;
            border: 1px solid red;
            overflow: hidden;
        }
        ul li{
            width: 90px;
            height: 50px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            list-style: none;
        }
        .cur>a{
            color: red;
            border-right: none;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li class="cur"><a href="javascript:;">热门推荐</a></li>
        <li><a href="javascript:;">潮流女装</a></li>
        <li><a href="javascript:;">品牌男装</a></li>
        <li><a href="javascript:;">内衣配饰</a></li>
        <li><a href="javascript:;">家用电器</a></li>
        <li><a href="javascript:;">电脑办公</a></li>
        <li><a href="javascript:;">手机数码</a></li>
        <li><a href="javascript:;">母婴频道</a></li>
        <li><a href="javascript:;">图书</a></li>
        <li><a href="javascript:;">家居家纺</a></li>
        <li><a href="javascript:;">居家生活</a></li>
        <li><a href="javascript:;">家具建材</a></li>
        <li><a href="javascript:;">热门推荐</a></li>
        <li><a href="javascript:;">潮流女装</a></li>
        <li><a href="javascript:;">品牌男装</a></li>
        <li><a href="javascript:;">内衣配饰</a></li>
        <li><a href="javascript:;">家用电器</a></li>
        <li><a href="javascript:;">电脑办公</a></li>
        <li><a href="javascript:;">手机数码</a></li>
        <li><a href="javascript:;">母婴频道</a></li>
        <li><a href="javascript:;">图书</a></li>
        <li><a href="javascript:;">家居家纺</a></li>
        <li><a href="javascript:;">居家生活</a></li>
        <li><a href="javascript:;">家具建材</a></li>
    </ul>
</div>
</body>

<script>
    var box=document.querySelector('.box');
    var ul=box.querySelector('ul');
    var lis=ul.querySelectorAll('li');

    /*-----定位的最大、最小位置-----*/
    var maxTop=0;
    var minTop=box.offsetHeight-ul.offsetHeight;


    /*-----------拖动ul最大最小位置-------------*/
    var maxSwipe=maxTop+120;
    var minSwipe=minTop-120;

    /*---记录当前的值---*/
    var currentY=0;

    /*封装添加过渡动画*/
    function setTransition(){
        ul.style.webkitTransition='transform 0.3s';
        ul.style.transition='transform 0.3s';
    }
    /*封装删除的过渡动画*/
    function removeTransition(){
        ul.style.webkitTransition='none';
        ul.style.transition='none';
    }
    /*封装添加Y轴移动*/
    function setTranslateY(x){
        ul.style.webkitTransform='translateY('+x+'px)';
        ul.style.transform='translateY('+x+'px)';
    }

    /*---------------------点击颜色变化&&点击的li移动到最顶端----------------------*/
    Myclcik(box,function(){
        box.addEventListener('click',function(e){
            var target= e.target.parentNode;
            console.log(target);
            for(var i=0;i<lis.length;i++){
                lis[i].classList.remove('cur');
                lis[i].index=i;
            }
            target.classList.add('cur');
            var y=-target.index*50;
            if(y>maxTop){
                y=maxTop;
            }
            if(y<minTop){
                y=minTop;
            }
            setTransition();
            setTranslateY(y);
            currentY=y;
        })
    })

    /*------------------手动移动ul && 有限制范围------------------------*/

    var startY=0;
    var moveY=0;
    var distanceY=0;

    ul.addEventListener('touchstart',function(e){
        startY= e.targetTouches[0].clientY;
    })

    ul.addEventListener('touchmove',function(e){
        moveY= e.targetTouches[0].clientY;
        distanceY=moveY-startY;
        var y=distanceY+currentY;

        if(y>maxSwipe){
            y=maxSwipe;
        }
        if(y<minSwipe){
            y=minSwipe;
        }
        removeTransition();
        setTranslateY(y);
    })

    ul.addEventListener('touchend',function(e){
        currentY=currentY+distanceY;
        if(currentY>maxTop){
            currentY=maxTop;
            setTransition()
            setTranslateY(currentY);
        }
        if(currentY<minTop){
            currentY=minTop;
            setTransition();
            setTranslateY(currentY);
        }

        /*---------数据重置---------*/
        startY=0;
        moveY=0;
        distanceY=0;
    })


    /*封装移动端的点击函数*/
    function Myclcik(obj,callback){
        if(typeof obj=='object'){
            var startTime=0;
            var isMove=false;

            obj.addEventListener('touchstart',function(){
                startTime=Date.now();
            })

            obj.addEventListener('touchmove',function(){
                isMove=true;
            })

            obj.addEventListener('touchend',function(){
                if(Date.now()-startTime<150 && !isMove){
                    callback && callback();
                }
                startTime=0;
                isMove=false;
            })
        }
    }
</script>

</html>

欢迎分享本文,转载请保留出处:前端ABC » 京东移动端侧边栏触摸事件

分享到:更多 ()

发表评论 0