移动WEB模拟原声APP滑动删除

移动WEB模拟原声APP滑动删除

效果

移动WEB模拟原声APP滑动删除_第1张图片

代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟App滑动删除</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1454057613_1757398.css">
    <style>
    body {
        background-color: #f2f2f2;
    }
    h1 {
        text-align: center;
        font-size: 1.4em;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .wrapper {
        position: relative;
        height: 100px;
        overflow: hidden;
        padding-bottom: 5%;
    }
    .container {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100px;
        line-height: 100px;
        padding-left: 5%;
        box-sizing: border-box;
        background-color: #fff;
        transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;
        -webkit-transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;
        font-size: 1.2em;
        font-weight: 200;
    }
    .delete {
        float: left;
        position: absolute;
        width: 100px;
        top: 0;
        right: -100px;
        background-color: #f00;
        color: #fff;
        text-align: center;
        height: 100px;
        line-height: 100px;
    }
    .delete i.iconfont {
        font-size: 1em;
        padding-right: 5px;
    }
    p {
        text-align: center;
        padding-top: 4em;
        padding-bottom: 6em;
        color: #555;
        font-size: 1em;
    }
    </style>
</head>
<body>
    <h1>移动WEB模拟原声APP滑动删除</h1>
    <div class="wrapper">
        <div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
    </div>

    <div class="wrapper">
        <div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
    </div>

    <div class="wrapper">
        <div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
    </div>

    <div class="wrapper">
        <div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
    </div>
    
    <div class="wrapper">
        <div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>
    </div>

    <p>西安领可网络 ChenShuo 2016</p>
    
    <script>
    var container = document.querySelectorAll('.container');

    for(var i=0; i<container.length; i++) {
        
        var x, y, X, Y, swipeX, swipeY;

        container[i].addEventListener('touchstart', function(event) {
            x = event.changedTouches[0].pageX;
            y = event.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true ;
        });

        container[i].addEventListener('touchmove', function(event) {

            X = event.changedTouches[0].pageX;
            Y = event.changedTouches[0].pageY;
            
            // 左右滑动
            if(swipeX && Math.abs(X-x) - Math.abs(Y-y) > 0) {

                // 阻止事件冒泡
                event.stopPropagation();

                if(X - x > 10) {
                    event.preventDefault();
                    this.style.left = '0px';
                }
                if(x - X > 10) {
                    event.preventDefault();
                    this.style.left = '-100px';
                }
                swipeY = false;
            }

            // 上下滑动
            if(swipeY && Math.abs(X-x) - Math.abs(Y-y) < 0) {
                swipeX = false;
            }
            
        });

    }
    
    </script>
</body>
</html>

你可能感兴趣的:(移动WEB模拟原声APP滑动删除)