jQuery实现移动端左滑删除功能

来源：互联网发布：mac系统的ipa文件编辑：程序博客网时间：2024/05/28 06:06

在手机移动端，经常需要实现类似微信聊天工具中的左滑动删除和右滑动恢复功能。

这里，我们可以直接使用jQuery来实现该效果。

基本原理：

利用jQuery中的touchstart、touchmove、touchend、touch事件和animate方法。
条目包裹区块（item_wrap）和里面的条目内容区块（item_top）采用相对定位，删除按钮（item_del）采用绝对定位。
条目内容区块默认是在删除按钮的上层，即它是盖住了删除按钮。向左滑动条目内容区块时，删除按钮就自动显示出来了。
滑动时，利用css的left属性实现实时滑动效果；touchend或touch时，利用animate方法实现动画效果。
向左滑动大于等于删除按钮的一半宽度时，touchend时才完全显示删除按钮；否则，恢复原状。
当删除按钮已处于完全显示状态时，可通过右滑或touch条目内容区块来恢复原状；touch删除按钮时，删除父元素节点。

完整的示例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>移动端左滑删除、右滑恢复效果</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><style> html {    font-family:微软雅黑;    font-size:16px;}body, div, p, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select{    margin:0;    padding:0;}.header, .footer {    background-color: #ccc;    border: 1px solid #aaa;    height:6rem;    font-size:2.5rem;    text-align:center;    line-height:6rem;}.footer {    position: fixed;    bottom:0;    width:100%;}.item_wrap {    position:relative;    margin-top:1px;    width:100%;    text-align:center;    height:6rem;    line-height:6rem;    font-size:2rem;}.item_wrap .item_top {    position:relative;        top:0;    border-bottom: 1px solid #888;    background-color: #fff;    overflow:hidden;    z-index: 10;}.item_wrap .item_del {  /* 删除按钮位于条目内容的下一层 */    position: absolute;    background-color: #c00;    top:0;    right: 0;    width: 15%;    color: #fff;    letter-spacing: 3px;    z-index: 9;}</style></head><body><div>    <div class="header">头部导航</div>    <div class="main">        <div class="item_list">            <div class='item_wrap'>                <div class='item_top'>测试条目1</div>                <div class="item_del">删除</div>            </div>            <div class='item_wrap'>                <div class='item_top'>测试条目2</div>                <div class="item_del">删除</div>            </div>            <div class='item_wrap'>                <div class='item_top'>测试条目3</div>                <div class="item_del">删除</div>            </div>        </div>    </div>    <div class="footer">底部区域</div></div></body></html><script>(function(){    var start_x;   // touchstart时的水平起始位置    var end_x;     // touchmove过程中的水平结束位置    var touchmove = false;    // 标识是否成功触发了touchmove，默认没有触发。    // on方法事件绑定，可将事件绑定到新添加的子元素上    $(document).on("touchstart",'.item_top',function(e){ // 触摸开始时        if (e.originalEvent.targetTouches) {            start_x = e.originalEvent.targetTouches[0].pageX;        } else {            start_x = e.pageX;        }//    console.log(start_x);    });    $(document).on("touchmove",'.item_top',function(e){ // 触摸过程中...         var width = $('.item_del:first').width();   // 删除按钮的宽        var left = $(this).css('left');        if(start_x - end_x >= 5){            touchmove = true;        }        if (e.originalEvent.targetTouches) {            end_x = e.originalEvent.targetTouches[0].pageX;        } else {            end_x = e.pageX;        }        if(start_x - end_x >= 0) {  // touchmove 向左移动            if(parseInt(left) > -width){                $(this).css('left', end_x-start_x+'px');  // 移动效果            }        }else{  // 向右移动            if(parseInt(left) <0){                $(this).animate({left:0},500);  // 恢复原状（动画效果）            }        }    });    $(document).on("touchend",'.item_top',function(e){  // 触摸抬起时        var width = $('.item_del:first').width();   // 删除按钮的宽        var offset = start_x - end_x;     // 偏移量        if(touchmove==false) {            return;        }        if( offset > 0){   // 左滑动            if(offset>=width/2){      // 偏移量大于等于删除按钮的一半                $(this).animate({left:-width+'px'},500);  // 动画显示删除按钮            }else{                $(this).animate({left:0},500);  // 恢复原状            }        }        touchmove = false;    });    $(document).on('touch', '.item_top',function(e){  // 点击主条目时，也可恢复原状        var width = $('.product_item_del:first').width();           var left = $(this).css('left');        if(parseInt(left)<0){            $(this).animate({left:0},500);  // 恢复原状        }    });    $(document).on('touch', '.item_del',function(e){  // 点击删除，删除父元素节点        $(this).parent().remove();    });})();</script>

阅读全文

0 0