滑动删除实现

发布时间:2020-07-08 10:18:21 作者:liumanwei
来源:网络 阅读:1196
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<title>TOUCH</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        -webkit-user-select: none;
    }
    body, button{
        font-family:'Microsoft YaHei', arial, helvetica, sans-serif;
    }
    .wrap{
        position: relative;
        height: 60px;
        border-bottom: 1px solid #ccc;
    }
    .container{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 60px;
        display: -webkit-box;
        background-color: #FFF;
    }
    .trans{
        -webkit-transition: margin-left 0.2s linear;
        transition: margin-left 0.2s linear;
    }
    .head-img{
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #99F;
        border-radius: 3px;
        margin: 10px 0 0 10px;
        text-align: center;
        font-size: 12px;
        color: #FFF;
    }
    .content{
        margin: 10px 0 0 5px;
        -webkit-box-flex: 1;
    }
    .content p{
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }
    .del-btn{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #F00;
        color: #FFF;
        border: 0;
        font-size: 14px;
    }
</style>
</head>
<body>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <div class="wrap">
        <div class="container">
            <p class="head-img">图片</p>
            <div class="content">
                <h6>腾讯新闻</h6>
                <p>云南鲁甸强震已致379人遇难</p>
            </div>
        </div>
        <button class="del-btn">删除</button>
    </div>
    <script type="text/javascript">
        var startPos = 0,
            endPos = 0,
            parent = null;
        document.body.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            var target = e.target;
            if(target.className.indexOf('del-btn') > -1) {
                alert('点击了删除');
            }
        }, false);
        document.body.addEventListener('touchstart', function(e) {
            parent = e.target;
            while(parent && parent.className.indexOf('container') < 0) {
                parent = parent.parentNode;
            }
            var touch = e.touches[0];
            startPos = touch.pageX;
            parent.className = 'container';
        }, false);
        document.body.addEventListener('touchmove', function(e) {
            var touch = e.touches[0],
                offset = 0;
            if(parent.className != 'container') {
                return;
            }
            endPos = touch.pageX;
            offset = endPos - startPos;
            if(offset > 0) {
                offset = 0;
                if(parent.className.length > 0) {
                    parent.className = parent.className + ' trans';
                } else {
                    parent.className = 'trans';
                }
            } else if(Math.abs(offset) > 60) {
                offset = -60;
            }
            parent.style.marginLeft = offset + 'px';
        }, false);
        document.body.addEventListener('touchend', function(e) {
            var offset = 0;
            if(parent.className != 'container') {
                return;
            }
            offset = endPos - startPos;
            if(offset < 0 && Math.abs(offset) > 30) {
                offset = -60;
            } else {
                offset = 0;
            }
            if(parent.className.length > 0) {
                parent.className = parent.className + ' trans';
            } else {
                parent.className = 'trans';
            }
            parent.style.marginLeft = offset + 'px';
        }, false);
    </script>
</body>
</html>




推荐阅读:
  1. RecyclerView实现拖动排序和滑动删除功能
  2. cc美团 滑动删除(SwipeListView)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

删除 html5 css3

上一篇:Flutter实现路由与导航的方法

下一篇:怎么成为java高级架构师?图灵学院总结的java架构师学习路线

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》