请用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实现滑动删除的更多相关文章

  1. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

  2. ListView滑动删除效果实现

    通过继承ListView然后结合PopupWindow实现 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" ...

  3. 下拉刷新列表添加SwipeDismissListViewTouchListener实现滑动删除某一列。

    <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的 ...

  4. android中列表的滑动删除仿ios滑动删除

    大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...

  5. Android滑动删除功能

    今天学习了新的功能那就是滑动删除数据.先看一下效果 我想这个效果大家都很熟悉吧.是不是在qq上看见过这个效果.俗话说好记性不如赖笔头,为了我的以后,为了跟我一样自学的小伙伴们,我把我的代码粘贴在下面. ...

  6. framework7滑动删除列表触发chrome 报错解决办法

    使用 <div class="list-block"> <ul> <li class="swipeout"> <div ...

  7. android 继承ListView实现滑动删除功能.

    在一些用户体验较好的应用上,可以经常遇见   在ListView中  向左或向右滑动便可删除那一项列表. 具体实现  则是继承ListView实现特定功能即可. (1). 新建 delete_butt ...

  8. 原生H5页面模拟APP左侧滑动删除效果

    话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...

  9. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

随机推荐

  1. CodeSign error: code signing is required for product type 'Application' in SDK 'iOS 7.0'

    这个一般是证书设置的问题, 在build settings中找到 Code Signing->Code Signing Identity修改成有效的证书即可

  2. GridControl 校验输入单元格格式 z

    // 对应的校验行事件,ValidateRow private void gv_FeeItem_ValidateRow(object sender, DevExpress.XtraGrid.Views ...

  3. C++ 用libcurl库进行http通讯网络编程 【转】

    http://www.cnblogs.com/moodlxs/archive/2012/10/15/2724318.html C++ 用libcurl库进行http通讯网络编程 目录索引: 一.Lib ...

  4. ZooKeeper 授权验证

    ZooKeeper 授权验证 学习了:https://blog.csdn.net/liuyuehu/article/details/52121755 zookeeper可以进行认证授权:

  5. HttpClient获取Cookie的两种方式

    转载:http://blog.csdn.net/zhangbinu/article/details/72777620 一.旧版本的HttpClient获取Cookies p.s. 该方式官方已不推荐使 ...

  6. jquery中text(),html(),val()在取值上的区别

    1.html():读取和修改一个元素的HTML内容: 2.text():读取和修改一个元素的文本内容: 3.val():读取和修改一个表单元素的value字段值.

  7. adb命令具体解释（二）——手机缺失sqlite3时操作数据库的多种解决方式

    在android应用开发无处不在SQLite数据库的身影.那么在开发中怎么使用adb命令操作数据库的功能呢? 以下我们将完整的介绍与数据库操作相关的命令集及当手机缺少sqlite3的时候的多种解决方式 ...

  8. Mataplotlib事例操作

    刚开始需要的文件是和前边的两个连载一起的

  9. canvas转盘抽奖的实现(一)

    网络上已经有了很多转盘抽奖的代码,但大多是用jQuery插件实现的,其中的原理比较难弄明白,于是自己摸索了一个.最终效果如下:     // = totalTime) { stopRotation() ...

  10. 谈谈加载(Loading)的那点事

    谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...