优众联杰专注新津网站设计新津网站制作新津网站建设

新津网站建设公司服务热线：028-86922220

网站建设知识

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

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

滑动删除实现






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

其他资讯