滑动删除实现-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

滑动删除实现






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://kswsj.cn/article/pishsd.html