jquery/zepto仿手机app左滑删除效果

原创 2016年08月30日 12:50:36

jquery/zepto仿手机app左滑删除效果

产品这么要求。。。。只能照做啦
上效果图
这里写图片描述

这里写图片描述

这里写图片描述

html

css里列表内容正常布局,删除键(class=”addit”)用绝对定位(position:absolute;top: 0px;right:0px;),记得绝对定位的父级要加上(position:relative;)

绝对定位和相对定位的区别请点击这里~~~

    <div class="apply">
        <div  class="item">
            <a href="javascript:void(0)">
                <div class="pic"><img  src="img/message/z_message4.png"/></div >
                <div  class="name">
                    <span class="fl">订单通知</span>
                    <span class="fr f_clr99">2016-05-12</span>
                </div >
            </a>
        </div>
        <div class="addit delete" >删除</div>
    </div>  

css

 .apply{display:block;height:3.1rem;border-bottom: 1px solid #eee;position: relative;zoom: 1;overflow: hidden;padding: 0 .75rem;}
.apply .item2 div {font-size: .7rem;}
.apply .pic{width: 2.25rem;height: 2.25rem;margin-top: .35rem;float: left;}
.apply .pic img{width: 100%;height: 2.25rem;}
 .apply .name2{margin-left: 2.75rem;padding-top: .6rem;}
.apply .name2 span{display: block;/}

js

记得要引库文件

<script src="js/zepto.min.js"></script>

引jquery直接.click(function(){})就可以,zepto文件小所以这里引的这个库。
下面代码原理,向左滑动时触发事件,将整个.item向左移动空出来删除键的位置,再把删除键显现就可以了(重要的是(‘.item’),(‘.delete’)和(‘.addit’)其它class可忽略)

.live() .click()区别点击这里哟

    $('.item').live("swipeLeft",function(){//左滑显示隐藏按键
        $(this).animate({left:'-3rem'},200,'linear').siblings('.addit').animate({width:'3rem'},200,'linear');
        $(this).parent('li').siblings('li').find('.item').animate({left:'0'},200).siblings('.addit').animate({width:'0'},200);
    }); 
    $('.item').live("swipeRight",function(){//右滑恢复 
     $(this).animate({left:'0'},200).siblings('.addit').animate({width:'0'},200);
    });
    $('.delete').live("tap",function(){ //删除
     $(this).parent().remove();
    });
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

基于jQuery的左滑出现删除按钮

最近在做项目的时候遇到了个需求,在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果,于是尝试着写了一个,写出来与大家交流分享,大神勿喷。基本要求由于我们是在做一个跨平台的APP,里面部分界面...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

移动web最简洁的滑动效果Swipe JS(适合初学者)

之前一直都是后台开发,最近要做一个前台相关的项目,

移动端列表项左滑删除功能

//左滑删除 var lines = $(".itme1_content li,.itme2_content li"); var len = lines.length;...

zepto判断左右滑动

var startPosition, endPosition, deltaX, deltaY, moveLength; $(".content").bind('touchstart',...

左滑动删除wxapp-leftSwiperDel

微信小程序---左滑删除 实例源码 测试: 测试安卓系统5.1能正常使用 测试苹果ios系统10.2能正常使用 问题: 左滑动时会默认触发整个页面的弹动效果,如果使用c...

jq实现左滑显示删除按钮,点击删除实现删除数据

效果图第一步:加载 第二步:html

浅谈移动端之touch事件--手指的上滑、下滑、左滑和右滑

原理:第一,当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;第二,当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标move...

手机端滑动、长按事件插件touchswipe.js的使用示例

test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%; background:...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery/zepto仿手机app左滑删除效果
举报原因:
原因补充:

(最多只允许输入30个字)