`
wx1569484809
  • 浏览: 63887 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

实现效果如图：

192329_2AtB_3708069.png

使用了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 οnclick="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 οnclick="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）：

193756_B2jD_3708069.png

193654_6F5c_3708069.png

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

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

转载于:https://my.oschina.net/u/3708069/blog/1795640

分享到：
| java堆、栈、堆栈的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    适用于小程序的aui

    开发者可以通过引入这些CSS文件，并结合小程序的WXML（WeiXin Markup Language）和JS（JavaScript）文件，轻松地应用AUI的样式到小程序页面上。 AUI的使用方法通常包括以下几个步骤： 1. 引入AUI的样式文件：在小...

    原生js Aui-core结合css3 transform属性制

    Aui-core是一个基于原生JavaScript的库，它旨在简化前端开发，提供了一些实用的工具和功能。在这个项目中，我们看到Aui-core与CSS3的`transform`属性相结合，来实现更丰富的视觉效果和动态交互。 `transform`属性是...

    蓝色风格移动端前端框架aui，可媲美weui

    2. **组件丰富**：AUI提供了诸如按钮、表单、导航、提示、弹窗、轮播图等常见的前端组件，且每种组件都有详细的API文档和示例代码，方便开发者快速上手。 3. **蓝色主题**：AUI的蓝色调设计不仅符合大部分用户的...

    aui模板工程文件

    - **js**目录：存放JavaScript文件，可能包括`aui`库本身、项目特定的脚本以及AMD模块定义。 - **css**目录：包含`aui`的样式文件和其他定制的CSS样式。 - **images**或**img**目录：存放项目所需的图片资源。 - **...

    AngularJS_AUI库

    通过与AngularJS的深度集成，AUI库能够充分利用AngularJS的数据绑定、依赖注入和模块化等特性，实现高效、动态和响应式的用户界面。 首先，我们来了解一下AngularJS。AngularJS是由Google维护的一个开源JavaScript...

    用Aui-core实现的图片3D 360度旋转JS特效

    在IT行业中，JavaScript特效是网页开发中的重要组成部分，它们能够为用户提供更加生动、交互性强的体验。本项目涉及的是一个使用Aui-core库实现的图片3D 360度旋转效果，它允许用户从各个角度查看图片，增强视觉体验...

    aui移动端UI框架

    aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件…)；插件(如：loading加载、dialog模态框、toast消息提示、...

    AUI在线文档

    ### AUI在线文档知识点概述 #### 一、AUI框架简介 - **定位与目标**：AUI（Access UI）是专门为APICloud平台设计的一款UI框架，旨在简化APP界面开发流程并提升用户体验。该框架由个人开发者基于兴趣研发，并非商业...

    aui yui alloy2.0

    首先，AUI（Alloy UI）是基于YUI（Yahoo User Interface Library）的一个扩展，它提供了更多的组件和设计模式，旨在简化和加速Web应用的开发。AUI YUI Alloy2.0的发布，意味着这个框架在原有的基础上，进一步强化了...

    wxpython子模块wx.lib.agw.aui实现的通讯录桌面程序源代码IDE运行和调试通过

    工具栏：创建了一个工具栏，并添加了新建、打开、保存、编辑和删除联系人的按钮，每个按钮都绑定了相应的事件处理函数。菜单栏：添加了文件菜单和帮助菜单，其中文件菜单包含了新建、打开、保存、编辑、删除和退出...

    aui模板工程文件完善

    AUI，可能是指一个基于特定框架（如AngularJS、Vue.js或React.js）的用户界面框架，或者是自定义的前端组件库。在这里，我们将深入探讨AUI模板工程的各个方面，以及如何对其进行优化和完善。 首先，我们要理解模板...

    aui+mui+weui+layui+bootstrap多个ui框架

    1. **AUI**（Alipay UI）：AUI是由阿里巴巴开源的一款基于Flexbox布局的前端框架，主要用于移动Web应用。它提供了一系列与阿里巴巴集团内部设计规范相一致的组件，如导航、按钮、表单、栅格系统等。AUI强调一致性、...

    AUI手机APP开发助手

    AUI手机APP开发助手是一款专为开发者设计的工具，它主要针对的是AUI（App User Interface）框架的应用程序开发。AUI是一种轻量级、高效且易于使用的移动应用界面开发框架，广泛应用于智能手机和平板电脑的原生或混合...

    aui-artDialog弹出框

    支持普通与 12 方向气泡状对话框 完善的焦点处理，自动焦点附加与回退 支持 ARIA 标准 面向未来：基于 HTML5 Dialog 的 API 支持标准与模态对话框 丰富且友好的编程接口 能自适应内容尺寸 仅 4kb (zip)。...

    使用AUI框架开发微信小程序模板

    4. **组件丰富**：AUI提供了包括按钮、导航、列表、表单、弹窗等在内的多种常见组件，覆盖了日常开发中的大部分需求，且这些组件都是经过优化的，性能表现良好。 5. **易于上手**：AUI的文档清晰、详细，对每个组件...

    进销存手机版管理系统（aui+vue）

    进销存手机版管理系统是一款基于AUI和Vue.js技术构建的应用，专为移动设备设计，旨在高效管理企业的库存、采购和销售活动。系统采用AUI（可能是AlloyUI或其他以A开头的UI框架）作为前端界面组件库，结合Vue.js的响应...

    aui:aui移动端UI框架

    aui移动端UI框架简介aui 是一套基于原生javascript开发的移动端UI框架。包含常用js API(如：字符校验、本地定时存储、数组对象处理、ajax原生封装、设备信息获取、手势事件...)；插件(如：loading加载、dialog模态框...

Magicbox
Global site tag (gtag.js) - Google Analytics