请用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. assign-cookies

    https://leetcode.com/problems/assign-cookies/ 用贪心算法即可. package com.company; import java.util.Arrays; ...

  2. K-L变换和 主成分分析PCA

    一.K-L变换 说PCA的话,必须先介绍一下K-L变换了. K-L变换是Karhunen-Loeve变换的简称,是一种特殊的正交变换.它是建立在统计特性基础上的一种变换,有的文献也称其为霍特林(Hot ...

  3. 如何直接打开使用locate等查找到的文件

    很多的时候需要使用locate去定位文件,找到了文件之后接下来就是使用相应的文本编辑工具如gvim进行打开. 这个时候最烦心的就是去复制一大长串的地址了. 如果能让定位和打开一体操作就最好了,这就需要 ...

  4. VC++ ADO 连接 mysql

    通过自己摸索和网上帮助 了解了VC++ 用ADO 连接mysql数据库的方法:     使用的方法是利用ADO通过建立ODBC数据源来最终达到访问MySQL的目的.     1.安装mysql数据库服 ...

  5. C++11 并发指南二(std::thread 详解)（转）

    上一篇博客<C++11 并发指南一(C++11 多线程初探)>中只是提到了 std::thread 的基本用法,并给出了一个最简单的例子,本文将稍微详细地介绍 std::thread 的用 ...

  6. diff patch

    http://rails-deployment.group.iteye.com/group/wiki/1318-diff-and-patch-10-minutes-guide 情景一:你正尝试从代码编 ...

  7. Arduino关于旋转编码器程序的介绍（Reading Rotary Encoders）--by Markdown

    介绍 旋转或编码器是一个角度測量装置. 他用作精确測量电机的旋转角度或者用来控制控制轮子(能够无限旋转,而电位器只能旋转到特定位置).其中有一些还安装了一个能够在轴上按的button,就像音乐播放器的 ...

  8. caffe搭建--vs2015+caffe+python3.5编译环境的搭建

    修改build_win.cmd如下: @echo off @setlocal EnableDelayedExpansion :: Default values if DEFINED APPVEYOR ...

  9. gridcontrol复选框功能实现（超具体）

    博主这几天就准备离职了,以后不再做.Net开发.因此这应该是我写的最后一篇关于dev控件的博文.既然是最后一篇,那就写的具体一些.画个圆满的省略号...... 本文介绍gridcontrol怎样实现复 ...

  10. php pack()函数详解与示例

    pack和unpack在一般的程序中还真的不容易见到,但是如果你用过很久以前的php生成excel你就会知道了.他的excel的头就是pack出来的最近在尝试与C交互的时候又用上了这玩意,所以不得不再 ...