成都创新互联网站制作重庆分公司

滑动删除实现






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);     

站在用户的角度思考问题,与客户深入沟通,找到弋江网站设计与弋江网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖弋江地区。



当前文章:滑动删除实现
文章链接:http://cxhlcq.com/article/pishsd.html

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部