原生JS实现H5页面侧滑删除的效果

目前很多H5框架都有类似QQ、微信消息侧滑删除的功能。如果工程并没有提供侧滑功能的时候该如何是好？。。。。得来全不费功夫，特此花费些时间编写的侧滑插件，希望能够帮助前端学习者的一些参考~~。本文根据实现此类效果展开说明以及演示。

• 基于移动端触摸事件touchstart、ontouchmove以及touchend事件。注意此三种事件的触发只能在手机上有效，电脑调试需切换手机调试模式。
• 使用CSS3 过度或者动画设置体验友好度

具体大家可以参考如下地址：
http://blog.csdn.net/china_guanq/article/details/77574514
API参考地址:
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

如下代码基于本文章DEMO展开说明，此刻上码如下实例

1、初始化侧滑HTML结构

<div class="list">    <div class="subListCon">        <label style="justify-content: center;display: flex;line-height: 55px;">侧滑。。侧滑</label>              </div>    <div class="subListTitle right">        <a class="subRight collection" onclick="Delete()">收藏</a>        <a class="subRight update" onclick="Update()">修改</a>        <a class="subRight delete" onclick="Delete()">记忆</a>    </div></div>

2、基于如上HTML结构编写CSS 样式

.listContext{position: absolute;left: 0;right: 0;}.listContext .list:first-child{border-top: 1px #ddd solid;}.list{border: 1px #ddd solid;height: 55px;background-color: white;border-right: none;border-left: none;border-top: none;display: flex;user-select: none;}   .subListCon{    height: 100%;    background-color: white;    width: 100%;    z-index: 999;    transform: translate3d(0px,0px,0px);    /*规定应用过渡的CSS属性*/    transition-property:transform;    /*规定应用过渡所花费的时间*/    transition-duration: 0s;    /*规定过渡效果从何开始，默认是0*/    transition-delay: 0;    /*规定过渡的时间曲线*/     transition-timing-function: linear;}.subListTitle{position: absolute;line-height: 55px;}.right{right: 0;}.right > .subRight{display: block;float: left;padding: 0 12px;}.delete{background-color: #ef473a;color: white;}.update{background-color: #ffc900;color: white;}

3、JS处理控制。为了满足较好的体验以及复用性。在原生JS处理上还是比较复杂。

<script type="text/javascript">    function touch(event) {        //获取触发滑动事件的Dom元素        var listDome = event.currentTarget.childNodes[0];        //侧滑菜单        var subCountWidth = event.currentTarget.childNodes[1].children;            switch(event.type){                case "touchstart" :                    //计算侧滑菜单宽度                    subWidth = 0;                    for(var i = 0;i<subCountWidth.length;i++) {                        subWidth = subWidth + subCountWidth[i].clientWidth;                    }                    listDome.style.transitionDuration = "0.3s";                    marginRight = window.getComputedStyle(listDome,"").transform;                    marginRight = Math.abs(Number(marginRight.substring(7,marginRight.length-1).split(",")[4]));                    //触摸点x轴距离                    $startX = event.touches[0].clientX;                    //触摸点至移动之后得到的x轴距离                    touchesX = 0;                    break;                case "touchmove" :                    listDome.style.transitionDuration = "0s";                    $moveX = event.touches[0].clientX;                    touchesX = $startX - $moveX;                    console.log("移动X距离----"+touchesX);                    //滑块距离右边实际距离 >= 0时                    if(marginRight >= 0) {                        if(marginRight+touchesX < 0 ) {                            listDome.style.transform = 'translate3d(0px,0px, 0px)';                        }else if(marginRight+touchesX <= 500) {                            listDome.style.transform = 'translate3d(-'+(marginRight+touchesX)+'px,0px, 0px)';                        }else {                            listDome.style.transform = 'translate3d(-'+subWidth+'px,0px, 0px)';                        }                    }else if(marginRight < 0) {                            listDome.style.transform = 'translate3d(0px,0px, 0px)';                    }                    break;                case "touchend" :                    listDome.style.transitionDuration = "0.3s";                    marginRight = window.getComputedStyle(listDome,"").transform;                    marginRight = Math.abs(Number(marginRight.substring(7,marginRight.length-1).split(",")[4]));                    if(marginRight <= 58 || touchesX <= -58) {                        listDome.style.transform = 'translate3d(0px,0px, 0px)';                    }else {                        listDome.style.transform = 'translate3d(-'+subWidth+'px,0px, 0px)';                    }                    break;            }        }        document.addEventListener("DOMContentLoaded",function() {            var listContext = document.getElementsByClassName("listContext");            for(var i = 0;i<listContext.length;i++) {                var listDOM = listContext[i].outerHTML;                listDOM = listDOM.replace(/[\r\n\t]/g,'');                listContext[i].outerHTML = listDOM;            }            /**             * 移动端侧滑菜单开始逻辑控制             */            var list = document.getElementsByClassName("list");            for(var i = 0;i<list.length;i++) {                list[i].addEventListener("touchstart",touch,false);                list[i].addEventListener("touchmove",touch,false);                list[i].addEventListener("touchend",touch,false);            }            /**             * 触摸关闭侧滑菜单             */            var subListCon = document.getElementsByClassName("subListCon");            for(var i = 0;i<subListCon.length;i++) {                subListCon[i].addEventListener("touchstart",function(event) {                    var thises = window.getComputedStyle(event.currentTarget,"").transform;                    thises = Math.abs(Number(thises.substring(7,thises.length-1).split(",")[4]));                    if(thises == 0) {                        var listContext = document.getElementsByClassName("listContext");                        for(var i = 0;i<listContext.length;i++) {                            var subListCon = document.getElementsByClassName("subListCon");                            for(var i = 0;i<subListCon.length;i++) {                                subListCon[i].style.transform = 'translate3d(0px,0px, 0px)';                            }                        }                    }                    event.currentTarget.style.backgroundColor = "#D9D9D9";                },false);                subListCon[i].addEventListener("touchmove",function(event) {                    event.currentTarget.style.backgroundColor = "white";                },false);                subListCon[i].addEventListener("touchend",function(event) {                    event.currentTarget.style.backgroundColor = "white";                },false);            }        })    </script>

END。
原DEMO提供下载地址
http://download.csdn.net/download/china_guanq/10032219

QQ群：595377655。问题总是能出现并着手解决的地方，欢迎加入。