基于JS实现向左滑动出现删除按钮(顺带aui弹窗改法)

原创
2018/04/14 19:47
阅读数 3.6K

实现效果如图:

使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
  <title>html5向左滑动删除特效</title>    
  <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
  <style>
  * {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  body{
    background: white;
  }
  .list-ul {
    overflow: hidden
  }
  
  .list-li {
    line-height: 66px;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
    padding: 0 12px;
    color: #666;
    -webkit-transform: translateX(0px);
  }
  
  .btn {
    position: absolute;
    top: 0;
    right: -80px;
    text-align: center;
    background: #99c7c3;
    color: #fff;
    width: 80px
  }
  .con{
    position: relative;
    font-size: 14px;
    line-height: 66px;
  }
  .con img{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 9%;
    top: 30%;
    border-radius: 50%;
  }
  .text2{
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 21%;
  }
  .text2_2{
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 19%;    
  }
  .con1{
    height: 66px;
  } 
  .con1 img{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 3.5%;
    top: 30%;
    border-radius: 50%;    
  }  
  .con1_text{
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 13%;  
  }
  .con2{
    height: 66px;
  } 
  .con2 img{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 3.5%;
    top: 30%;
    border-radius: 50%;    
  }  
  .con2_text{
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 13%;  
  }
  .con3{
    height: 66px;
  } 
  .con3 img{
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    left: 3.5%;
    top: 30%;
    border-radius: 50%;    
  }
  .con3_text{
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 13%;  
  }
  .successOrder{            
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #99c7c3;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;
  }
  .failOrder{
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #aeaeae;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;    
  }
  .waiting{
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #6699cc;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;   
  }
  .accpetOrder{
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #99c7c3;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;   
  }
  .refuseOrder{
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #aeaeae;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;    
  }
  .unanswered{
    width: 3.5rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    color: #ffffff;
    border-radius: 0.5rem;
    background: #6699cc;
    font-size: 14px;
    position: absolute;
    top: 36%;
    right: 12%;       
  }

  .date{            
    font-size: 14px;
    height: 0.8rem;
    line-height: 0.8rem;
    color: #dbdbdb;
    position: absolute;
    top: 50%;
    right: 3%;            
    margin-top: -0.5rem;   
  }


    .aui-dialog-header{
            position: relative;
            height:1.5rem;
        }
        .dialog_pic{
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            position: absolute;
            top: 0rem;
            left: 20%;
        }
/*        .cover p{
            margin-right: -18%;
        }*/
        .aui-dialog-body{
            position: relative;
            height: 8rem;
        }
        .centent1{
            position: absolute;
            top: 0.3rem;
            left: 0.8rem;
        }
        .centent2{
            border-bottom: 0.05rem solid #dbdbdb;    
            margin-top: 0.7rem;

        }
        .dialog_headText{
            border-bottom: 0.05rem solid #dbdbdb;    
            height: 1.2rem;
        }
        .centent3{
            padding-top: 31.5%;
        }        

        .aui-dialog-header{
            position: relative;
            height:1.5rem;
        }
        .dialog_pic_1{
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            position: absolute;
            top: 0rem;
            left: 29%;
        }
/*        .cover p{
            margin-right: -18%;
        }*/
        .aui-dialog-body{
            position: relative;
            height: 12.25rem;
        }
        .centent1_1{
            position: absolute;
            top: 0.3rem;
            left: 0.8rem;
        }
        .centent2_1{
            border-bottom: 0.05rem solid #dbdbdb;    
            margin-top: 0.7rem;

        }
        .dialog_headText_1{
            border-bottom: 0.05rem solid #dbdbdb;    
            height: 1.2rem;
        }
        .centent3_1{
            padding-top: 20.5%;
        }
/*        .aui-dialog-btn{
            color: #99c7c3;
        }*/
/*        .aui-dialog-footer{
            width: 270px;
            height: 90px;
            background: #484848;
        }
        .aui-dialog-btn{
            font-size: 16px;
            color: white;
        }*/
        .content_bgBlack{
            width: 13.5rem;
            margin-left: -0.75rem;
            background: #99c7c3;
            color: white;
            font-size: 0.8rem;    
            height: 3.2rem;
            margin-top: 3rem;
        }
        .p1{
            font-size: 0.7rem;
            color: white;
        }        
        .p2{
            font-size: 0.7rem;
            color: white;
            margin-top: -0.15rem;
        }        
        .p3{
            font-size: 0.7rem;
            color: white;
        }
  </style>

</head>

<body>
  <section class="list">
    <ul class="list-ul">
      <li id="li" class="list-li">
        <div class="con">
        <span class="text1">您向</span>
        <img src="../image/touxiang1.jpg">
        </div>        
        <span class="text2">杜瑞婷发起预约</span>
        <div class="successOrder" tapmode onclick="appointment()">预约成功</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>

      <li class="list-li">
        <div class="con">
            <span class="text1">您向</span>
            <img src="../image/touxiang1.jpg">        
            <span class="text2_2">杜瑞婷发起预约</span>
        </div>
        <div class="failOrder">预约失败</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>   

      <li class="list-li">
        <div class="con">
            <span class="text1">您向</span>
            <img src="../image/touxiang1.jpg">
            <span class="text2_2">杜瑞婷发起预约</span>   
        </div>
        <div class="waiting">在等待</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>      

      <li class="list-li">
        <div class="con1">
            <img src="../image/touxiang1.jpg">
            <span class="con1_text">杜瑞婷发起预约</span>   
        </div>
        <div class="accpetOrder">接受预约</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>

       <li class="list-li">
        <div class="con2">
            <img src="../image/touxiang1.jpg">
            <span class="con2_text">杜瑞婷发起预约</span>   
        </div>
        <div class="refuseOrder">拒绝预约</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>       

      <li class="list-li">
        <div class="con3">
            <img src="../image/touxiang1.jpg">
            <span class="con3_text">杜瑞婷发起预约</span>   
        </div>
        <div class="unanswered" tapmode onclick="appointment1()">未回复</div>
        <span class="date">3.12</span>
        <div class="btn">删除</div>
      </li>
    </ul>
  </section>
</body>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
  <script>    

  function appointment1(){
        var dialog = new auiDialog();
        dialog.alert({
            title:'<div class="cover"><img src="../image/freetime_touxiang.jpg" class="dialog_pic"><p class="dialog_headText">***向您发起预约</p></div>'
            ,            
            msg:'<div class="centent1">TA预约了您的:</div><div class="centent2">周六     10.00~12.00</div><div class="centent3">这里是需要帮忙做的事情</div>'
            ,
            buttons:['拒绝','接受']
        },function(ret){
            console.log(ret)
        })
           api.parseTapmode();
    }     

     function appointment(){
        var dialog = new auiDialog();
        dialog.alert({
            title:'<div class="cover_1"><img src="../image/freetime_touxiang.jpg" class="dialog_pic_1"><p class="dialog_headText_1">苍井空</p></div>'
            ,            
            msg:'<div class="centent1_1">TA预约了您的:</div><div class="centent2_1">周六     10.00~12.00</div><div class="centent3_1">帮忙做事的内容</div><div class="content_bgBlack"><p class="p1">QQ:4164456645</p><p class="p2">微信:cangjingkong12</p><p class="p3">手机号:1235445615</p></div>'
            ,
            buttons:['确认']
        },function(ret){
            console.log(ret)
        })   
        api.parseTapmode();
    }   
  /*
   * 描述:html5苹果手机向左滑动删除特效
   */    
   apiready = function(){

    };   

 window.addEventListener('load', function() {
    var initX; //触摸位置
    var moveX; //滑动时的位置
    var X = 0; //移动距离
    var objX = 0; //目标对象位置
    window.addEventListener('touchstart', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        initX = event.targetTouches[0].pageX;
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
      }
      if (objX == 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              obj.style.WebkitTransform = "translateX(" + 0 + "px)";
            } else if (X < 0) {
              var l = Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + -l + "px)";
              if (l > 80) {
                l = 80;
                obj.style.WebkitTransform = "translateX(" + -l + "px)";
              }
            }
          }
        });
      } else if (objX < 0) {
        window.addEventListener('touchmove', function(event) {
          event.preventDefault();
          var obj = event.target.parentNode;
          if (obj.className == "list-li") {
            moveX = event.targetTouches[0].pageX;
            X = moveX - initX;
            if (X >= 0) {
              var r = -80 + Math.abs(X);
              obj.style.WebkitTransform = "translateX(" + r + "px)";
              if (r > 0) {
                r = 0;
                obj.style.WebkitTransform = "translateX(" + r + "px)";
              }
            } else { //向左滑动
              obj.style.WebkitTransform = "translateX(" + -80 + "px)";
            }
          }
        });
      }

    })
    window.addEventListener('touchend', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
        if (objX > -40) {
          obj.style.WebkitTransform = "translateX(" + 0 + "px)";
          objX = 0;
        } else {
          obj.style.WebkitTransform = "translateX(" + -80 + "px)";
          objX = -80;
        }
      }
    })
  })

 
  </script>
</html>

弹窗样式(aui-dialog):

aui-dialog弹出框可以直接在title:‘ ’  msg:' '中加入html元素

注意:由于touchmove和onclick时间有冲突  在onclick前必须加tapmode,在onclick函数后要加上api.parseTapmdoe(); 进行tapmode处理。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部