请用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. maven打包自动配置数据库链接信息

    pom.xml加入下面代码 <profiles> <profile> <id>dev</id> <activation> <activ ...

  2. 如果当前地图文档中有独立的Table，通过Engine如何获取该Table？

    将IMap转为ITableCollection,通过ITableCollection.get_Table(int index);来获取该Table

  3. openfire Android学习---android客户端聊天开发之登录 和 注销登录

    一切就绪,新建一个android测试工程: 上网权限配置,界面绘制啥的,这里就不说了. 首先 导入一个smark包.这个是用来维护长连接的,也可以是asmark.我用的是asmark 先普及一些基本知 ...

  4. tensorflow搭建神经网络基本流程

    定义添加神经层的函数 1.训练的数据2.定义节点准备接收数据3.定义神经层:隐藏层和预测层4.定义 loss 表达式5.选择 optimizer 使 loss 达到最小 然后对所有变量进行初始化,通过 ...

  5. 【IE】IE对line-height 失效的的解决方案

    微软的IE9 + Extjs3.1 确实头疼.在使用了line-height:20px 的Tree的样式,可是一直没有生效, 以下给出3中解决方式: 方案1.加padding-top: <div ...

  6. 判断用户Input输入的事件来进行登陆

    我们是通过键盘按的object.keyCode获取的 Html <input onkeydown="keydownMsg(event)" type="text&qu ...

  7. Lightoj 1088 - Points in Segments 【二分】

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1088 题意: 有一维的n个点和q条线段.询问每条线段上的点有多少个. 思路:寻 ...

  8. ARM和X86

    嵌入式简介汇总 脚本语言 编程语言 Java C# C ++ 汇编 机器语言 语言 Unix Linux Android + 塞班 + Windows + + + ios系统 基于unix内核的图形化 ...

  9. Codeforces Round #267 (Div. 2) B. Fedor and New Game

    After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...

  10. git+jenkins

    开发写代码的演变 一个开发单打独斗,撸代码,开发网站,自由自在 多个开发同时开发一个网站,同时改一份代码.但是同时改一个文件会导致冲突 分支结构,每天上班第一件事克隆代码,下班前最后一件事合并代码 好 ...