请用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. Swift oc 混编 - oc导入Swift协议

    (默认已经设置好桥接头文件)1.在Swift文件中写好协议2.oc类文件中导入:"项目名-swift.h"格式的文件 即:#include "项目名-swift.h&qu ...

  2. 转： WebRTC音视频引擎研究(1)--整体架构分析

    转自: http://blog.csdn.net/temotemo/article/details/7530504   目录(?)[+]   WebRTC技术交流群:234795279 原文地址:ht ...

  3. 如何在Linux中使用sFTP上传或下载文件与文件夹

    如何在Linux中使用sFTP上传或下载文件与文件夹 sFTP(安全文件传输程序)是一种安全的交互式文件传输程序,其工作方式与 FTP(文件传输协议)类似. 然而,sFTP 比 FTP 更安全;它通过 ...

  4. js 节点操作

    添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id=& ...

  5. 【分布式计算】DFS &amp;&amp; BigTable

    1.背景 分布式计算的发迹应该是google在2003年发表的三篇paper.各自是GFS.MapReduce.BigTable. 当中MapReduce大家都非常熟悉了.不懂的同学也能够看看我之前写 ...

  6. 解决"Subquery returns more than 1 row"sql查询错误

    http://blog.csdn.net/c517984604/article/details/7052186 [Err] 1242 - Subquery returns more than 1 ro ...

  7. Linux(centos 6.5) 调用java脚本以及定时运行的脚本实例及配置文件具体解释

    Linux(centos 6.5) 调用java脚本以及定时运行的脚本实例 一.调用java程序脚本(默认已经搭建好了Java环境) 1.jdk 安装路径 /usr/jdk/jdk1.7/-- 2.j ...

  8. ubuntu 下的中文输入法的安装和配置- ibus

    ibus输入法 Chinese语言包安装 首先需要给Ubuntu16.04安装Chinese语言包支持.  如上图点击其中的Install/Remove Languages…,这个对话框是通过syst ...

  9. oracle sql 当初始化数据时避免重复主键

    一:当有主键序列自动增长时候(序列为:seq_cct_id) insert into cs_cost_type (CCT_ID, CCT_NAME, CCT_RATE, CCT_RATE_TYPE, ...

  10. linux上查看系统内核版本命令（转载）

    uname -a uname -r 查看发行版本信息: 在RedHat系统里,存在一个/etc/redhat-release文件,里面保存了发行版的版本信息 $cat /etc/redhat-rele ...