我们专注攀枝花网站设计攀枝花网站制作攀枝花网站建设

成都网站建设公司服务热线：400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

滑动删除实现





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://shouzuofang.com/article/pishsd.html

其他资讯