关闭

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

标签: 手机app滑动jquery
4733人阅读 评论(2) 收藏 举报
分类:

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();
    });
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11246次
    • 积分:286
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论