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

touch实现滑动删除

时间:2016-05-08 16:33:16      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

请用chrome手机模式查看或者在手机上查看(转载请注明出处)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Touch滑动</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" contect="Wt, wt9213@163.com" />
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
        background-color:#e3e3e3; 
    }
    .list{
        margin: 0 auto;
        max-width: 720px;
    }
    .item{
        position: relative;
        height: 50px;
        border-bottom:1px solid #e3e3e3;
    }
    .touchitem{
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 50px;
        font-size: 18px;
        z-index: 99;
        background-color: #fff;
    }
    .touchitem span{
        padding-left: 20px;
    }
    .delete{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20%;
        line-height: 50px;
        text-align: center;
        background-color:#DE2222;
        color: #fff;
        z-index: 0;
    }
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <!-- 手机端使用zepto.js -->
</head>
<body>
<div class="list">
    <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
     <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
     <div class="item">
        <div class="touchitem"><span>滑动删除</span></div>
        <div class="delete">删除</div>
    </div>
</div>
<script>
        $(function() {
            $(".touchitem").on(touchstart, function(e) {
                var touch = e.targetTouches[0];
                sessionStorage.setItem("touchstartX", touch.pageX);   //存储touch到的起始x坐标
            });
            $(".touchitem").on(touchmove, function(e) {
                var touch = e.targetTouches[0];
                var x = touch.pageX;
                //move的坐标的起始的坐标判断,得出方向
                if (x + 15 < sessionStorage.touchstartX) {   //
                    $(this).css({
                        "transform": "translate(-20%)"
                    });
        
                } else if (x - 15 > sessionStorage.touchstartX) {   //
                    $(this).css({
                        "transform": "translate(0)"
                    });
                }
            });
        });
    </script>
</body>
</html>

 

touch实现滑动删除

标签:

原文地址:http://www.cnblogs.com/wteng/p/5466527.html

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