张井乙ccccyc的博客

前端开发 移动端开发

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

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

.fl{float:left;}
.fr{float:right;}
 .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();
    });
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29783621/article/details/52368266
文章标签: 手机 app 滑动 jquery
想对作者说点什么? 我来说一句

移动端html5实现列表左滑删除

2015年08月17日 5KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭