189 8069 5689

滑动删除实现






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

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。