jQuery -- touch事件之左右切换元素

最新推荐文章于 2021-06-07 12:28:16 发布

豆i浆

最新推荐文章于 2021-06-07 12:28:16 发布

阅读量531

点赞数

分类专栏： jQuery javascript css css3

本文链接：https://blog.csdn.net/sinat_19327991/article/details/73823786

版权

jQuery 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

效果预览：
这里写图片描述
全部代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{

            }
            .content{
                position: relative;
                width: 100%;
                height: 17.64rem;
                background-color: #00FFFF;
                overflow: hidden;
            }
            .net{
                -webkit-transition-timing-function: ease-out;
                -moz-transition-timing-function: ease-out;
                -ms-transition-timing-function: ease-out;
                -o-transition-timing-function: ease-out;
                transition-timing-function: ease-out;
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -o-transform: translate(0,0);
                -ms-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                -o-transform: translate(0,0);
                -ms-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                -o-transition-property: -o-transform;
                -ms-transition-property: -ms-transform;
                transition-property: transform;  
                transition: all .5s;
                -moz-transition: all .5s;   /* Firefox 4 */
                -webkit-transition: all .5s;    /* Safari 和 Chrome */
                -o-transition: all .5s; /* Opera */
                position: relative;
                right: 0;
                display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                display: -moz-box; /* Firefox 17- */
                display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                display: -moz-flex; /* Firefox 18+ */
                display: -ms-flexbox; /* IE 10 */
                display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */            
            }
            .net div{
                width: 100%;
                height: 4.7rem;
                -webkit-flex-shrink: 0;
                -ms-flex: 0 0 auto;
                flex-shrink: 0;
                text-align: center;
                line-height: 4.7rem;
                font-size: 0.94rem;             
            }
            .net div:nth-child(odd){
                background-color: red;
            }
            .net div:nth-child(even){
                background-color: cadetblue;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="net">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </div>
        </div>
        <script type="text/javascript">
            var w = parseInt($('.net div').width());
            var c_w = parseInt(($('.net div').length*w)-w);
            var left = parseInt($('.net').position().left);
            $("body").on("touchstart", function(e) {
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }   
                startX = e.originalEvent.changedTouches[0].pageX,
                startY = e.originalEvent.changedTouches[0].pageY;
            });
            $("body").on("touchend", function(e) {         
                // 判断默认行为是否可以被禁用
                if (e.cancelable) {
                    // 判断默认行为是否已经被禁用
                    if (!e.defaultPrevented) {
                        e.preventDefault();
                    }
                }               
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;
                //左滑
                if ( X > 0 ) {
                    if(left == 0){
                        return;
                    }else{
                        left -= w;
                        $('.net').css("right",left + 'px');    
                    }               
                }
                //右滑
                else if ( X < 0 ) {
                    if(left == c_w){
                        return;
                    }else{
                        left += w;
                        $('.net').css("right",left + 'px');
                    }
                }
                //下滑
                else if ( Y > 0) {
                    alert("top 2 bottom");
                }
                //上滑
                else if ( Y < 0 ) {
                    alert("bottom 2 top");
                }
                //单击
                else{
                    console.log("just touch");
                }
            }); 
        </script>
    </body>
</html>