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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Touch滑动</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8.     <meta name="author" contect="Wt, wt9213@163.com" />
  9.     <style type="text/css">
  10.     body{
  11.         margin: 0;
  12.         padding: 0;
  13.         background-color:#e3e3e3;
  14.     }
  15.     .list{
  16.         margin: 0 auto;
  17.         max-width: 720px;
  18.     }
  19.     .item{
  20.         position: relative;
  21.         height: 50px;
  22.         border-bottom:1px solid #e3e3e3;
  23.     }
  24.     .touchitem{
  25.         position: absolute;
  26.         width: 100%;
  27.         height: 100%;
  28.         line-height: 50px;
  29.         font-size: 18px;
  30.         z-index: 99;
  31.         background-color: #fff;
  32.     }
  33.     .touchitem span{
  34.         padding-left: 20px;
  35.     }
  36.     .delete{
  37.         position: absolute;
  38.         top: 0;
  39.         right: 0;
  40.         height: 100%;
  41.         width: 20%;
  42.         line-height: 50px;
  43.         text-align: center;
  44.         background-color:#DE2222;
  45.         color: #fff;
  46.         z-index: 0;
  47.     }
  48. </style>
  49. <script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <!-- 手机端使用zepto.js -->
  50. </head>
  51. <body>
  52. <div class="list">
  53.     <div class="item">
  54.         <div class="touchitem"><span>滑动删除</span></div>
  55.         <div class="delete">删除</div>
  56.     </div>
  57.      <div class="item">
  58.         <div class="touchitem"><span>滑动删除</span></div>
  59.         <div class="delete">删除</div>
  60.     </div>
  61.      <div class="item">
  62.         <div class="touchitem"><span>滑动删除</span></div>
  63.         <div class="delete">删除</div>
  64.     </div>
  65. </div>
  66. <script>
  67.         $(function() {
  68.             $(".touchitem").on('touchstart', function(e) {
  69.                 var touch = e.targetTouches[0];
  70.                 sessionStorage.setItem("touchstartX", touch.pageX);   //存储touch到的起始x坐标
  71.             });
  72.             $(".touchitem").on('touchmove', function(e) {
  73.                 var touch = e.targetTouches[0];
  74.                 var x = touch.pageX;
  75.                 //move的坐标的起始的坐标判断，得出方向
  76.                 if (x + 15 < sessionStorage.touchstartX) {   //左
  77.                     $(this).css({
  78.                         "transform": "translate(-20%)"
  79.                     });
  80.  
  81.                 } else if (x - 15 > sessionStorage.touchstartX) {   //右
  82.                     $(this).css({
  83.                         "transform": "translate(0)"
  84.                     });
  85.                 }
  86.             });
  87.         });
  88.     </script>
  89. </body>
  90. </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. Delphi图像处理 -- 文章索引

    转载:http://blog.csdn.net/maozefa/article/details/7188354 本文对已发布<Delphi图像处理>系列文章进行索引链接,以方便阅读和查找. ...

  2. nginx学习（二）——基础概念之异步非阻塞

    上面讲了很多关于nginx的进程模型,接下来,我们来看看nginx是如何处理事件的. 有人可能要问了,nginx采用多worker的方式来处理请求,每个worker里面只有一个主线程,那能够处理的并发 ...

  3. [LeetCode][Java] Unique Paths II

    题目: Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. H ...

  4. Optimizer统计信息管理介绍

    1.    前言 在我们的日常维护中受理一些一直以来运行得非常好的系统,突然有一天用户反馈没有做不论什么操作,系统的某个功能模块或者是某个报表曾经仅仅须要几秒.但如今须要几分钟或更长的时间都没有返回结 ...

  5. 合并SO为单独交货单

    本场景为单步交货     为客户建立专用的route.     增加一个pull rule         在做订单的时候,为订单行选择 上面建立好的route,     连续建立了 2个 订单 SO ...

  6. Basic Socket

    http://www.avajava.com/tutorials/lessons/how-do-i-make-a-socket-connection-to-a-server.html?page=1 t ...

  7. jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...

  8. session.use_cookies有什么作用，

    session.use_cookies有什么作用, @ini_set('session.use_cookies', 1);什么意思 若session.use_cookies = 1 sessionid ...

  9. 嵌入式流媒体音视频服务器EasyIPCamera中live555发送性能优化点

    EasyIPCamera流媒体服务器 今年EasyDarwin团队在给国内某最大的金融安防公司做技术咨询的时候,开发了一款适用于嵌入式IPCamera.NVR的RTSP流媒体服务器:EasyIPCam ...

  10. EasyDarwin接入ffmpeg实现264转图片快照功能

    本文转自:http://blog.csdn.net/cai6811376/article/details/51774467 EasyDarwin一直坚持开源精神,所以我们着手把EasyDarwin中使 ...