请用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. js转换金额为中文大写

    function changeMoneyToChinese(money){ var cnNums = new Array("零","壹","贰&quo ...

  2. epoll 浅析以及 nio 中的 Selector

    首先介绍下epoll的基本原理,网上有很多版本,这里选择一个个人觉得相对清晰的讲解(详情见reference): 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作 ...

  3. 怎样高速启动Android模拟器（Android Emulator）

    总所周知,每次我们启动Android Emulator,都须要花费非常长一段时间,几分钟甚至十几分钟.事实上,我们能够使用快照(Snapshot)功能,来高速启动Android模拟器. 首先.须要在A ...

  4. jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径

    遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...

  5. vue2 + typescript2 项目开发（环境配置）

    Vue 引入 TypeScript vue init airyland/vux2 projectName 增加开发包的依赖 npm install typescript ts-loader --sav ...

  6. background-attachment

      CreateTime--2017年9月28日10:58:58 Author:Marydon background-attachment 1.定义 定义背景图片随滚动轴的移动方式(设置背景图像是否固 ...

  7. python（32）- 模块练习Ⅱ：使用正则表达式实现计算器的功能

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  8. 零基础学python-3.1 python基本规则和语句

    1."#"凝视的開始 #凝视的东西 print("welcome") 2."\n"换行符 watermark/2/text/aHR0cDov ...

  9. 我的vim插件列表

    一.正在使用的插件 1. NERD tree   文件浏览 2. bufexplorer  buffer 浏览 3. mru.vim   最近使用的文件浏览 4. ctrlp.vim  文件模糊搜索, ...

  10. Ubuntu 登陆异常-输入正确的密码后还会返回到登陆界面的问题

    问题表现: 启动到了登陆界面,输入对应的密码,发现一闪黑屏有返回到登陆界面,如此往复. 解决方法: 开机后在登陆界面按下shift + ctrl + F1进入tty命令行终端登陆,可以查看用户主目录下 ...