滑动删除实现
admin
2023-02-10 17:20:22
0





TOUCH

    *{
        margin: 0;
        padding: 0;
    }
    body{
        -webkit-user-select: none;
    }
    body, button{
        font-family:'Microsoft YaHei', arial, helvetica, sans-serif;
    }
    .wrap{
        position: relative;
        height: 60px;
        border-bottom: 1px solid #ccc;
    }
    .container{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 60px;
        display: -webkit-box;
        background-color: #FFF;
    }
    .trans{
        -webkit-transition: margin-left 0.2s linear;
        transition: margin-left 0.2s linear;
    }
    .head-img{
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #99F;
        border-radius: 3px;
        margin: 10px 0 0 10px;
        text-align: center;
        font-size: 12px;
        color: #FFF;
    }
    .content{
        margin: 10px 0 0 5px;
        -webkit-box-flex: 1;
    }
    .content p{
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }
    .del-btn{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        line-height: 60px;
        background-color: #F00;
        color: #FFF;
        border: 0;
        font-size: 14px;
    }



    
        
            图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

            
        
        删除     
                          图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

            
        
        删除     
                          图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

            
        
        删除     
                          图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

            
        
        删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                                图片

                             
腾讯新闻
                

云南鲁甸强震已致379人遇难

                              删除                   var startPos = 0,             endPos = 0,             parent = null;         document.body.addEventListener('click', function(e) {             e.stopPropagation();             e.preventDefault();             var target = e.target;             if(target.className.indexOf('del-btn') > -1) {                 alert('点击了删除');             }         }, false);         document.body.addEventListener('touchstart', function(e) {             parent = e.target;             while(parent && parent.className.indexOf('container') < 0) {                 parent = parent.parentNode;             }             var touch = e.touches[0];             startPos = touch.pageX;             parent.className = 'container';         }, false);         document.body.addEventListener('touchmove', function(e) {             var touch = e.touches[0],                 offset = 0;             if(parent.className != 'container') {                 return;             }             endPos = touch.pageX;             offset = endPos - startPos;             if(offset > 0) {                 offset = 0;                 if(parent.className.length > 0) {                     parent.className = parent.className + ' trans';                 } else {                     parent.className = 'trans';                 }             } else if(Math.abs(offset) > 60) {                 offset = -60;             }             parent.style.marginLeft = offset + 'px';         }, false);         document.body.addEventListener('touchend', function(e) {             var offset = 0;             if(parent.className != 'container') {                 return;             }             offset = endPos - startPos;             if(offset < 0 && Math.abs(offset) > 30) {                 offset = -60;             } else {                 offset = 0;             }             if(parent.className.length > 0) {                 parent.className = parent.className + ' trans';             } else {                 parent.className = 'trans';             }             parent.style.marginLeft = offset + 'px';         }, false);     




相关内容

热门资讯

国务院成立广西六蓝水库溃坝灾害... 7月6日,广西南宁横州市六蓝水库发生溃坝,造成重大人员伤亡。根据国家有关法律法规规定,国务院成立调查...
倚美搞事,菲律宾政府连“为奴”... 南海的风浪,很大一部分是菲律宾政府自己搅起来的。近年来,菲政府在仁爱礁、黄岩岛等地小动作频频,不仅频...
雨花台区企业摘得国家科学技术进... 晨报讯(南京晨报/爱南京记者 陈彦)记者从南京市雨花台区获悉,在新近揭晓的2025年度国家科学技术奖...
美国公布新关税措施,日本、澳大... 据法新社、澳大利亚广播公司(ABC)报道,针对美国将于美东时间24日以所谓“强迫劳动”为名对数十个国...
济南大数据集团激活数据要素潜能... 走进“泉数汇·数港”线下体验空间,健康画像、求职背调、“泉涌”工作站等数据产品一字排开,来访者可以像...
太保寿险河南分公司举办员工家庭... 5月22日,中国太保寿险河南分公司在郑州举办绩优干部员工家庭开放日活动,邀请员工家属走进企业,参观办...
“展现了推动人工智能普惠向善发... 7月17日至20日,2026世界人工智能大会暨人工智能全球治理高级别会议在上海举行,习近平主席出席开...
多地官宣结婚生娃发钱,最高20... 近日,广东佛山顺德陈村镇大都村通过股东会议表决,将生育结婚奖励政策纳入《佛山市顺德区陈村镇大都村股份...
蒋万安、卢秀燕、谢国梁开记者会... 海峡导报综合报道 民进党当局核准台湾“中联”19批油品即日起重新上架,台“食药署”23日首度公布共计...
西门子洗衣机不工作了什么原因 西门子洗衣机不工作了什么原因1、可能是使用时间太久了,导致洗衣机内部零件出现了问题。2、可能是长时间...