码迷,mamicode.com
首页 > 其他好文 > 详细

滑动删除实现

时间:2014-08-05 14:26:11      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:删除   html5   css3   测动删除   transition   

<!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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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">
                <h5>腾讯新闻</h5>
                <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>




本文出自 “我就是标准” 博客,请务必保留此出处http://liumanwei.blog.51cto.com/3005291/1535867

滑动删除实现,布布扣,bubuko.com

滑动删除实现

标签:删除   html5   css3   测动删除   transition   

原文地址:http://liumanwei.blog.51cto.com/3005291/1535867

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!