js高仿QQ消息列表左滑功能

　　该组件，主要功能类似于QQ消息列表左滑出现删除、标为已读等按钮的功能；现在的版本用的是纯javaScript编写；后续会跟进 angularJs 开发的类似组件以及jquery的;

下面，就让我们来认识下怎么使用该程序；

　　在该程序里，总共分为四个文件：

　　1 .css文件夹

　　2. img 图片文件夹

　　3. js文件

　　4. index.html 主页面；

　　稍后，你可以自行下载，打开运行观看效果；

二、代码讲解

1.此html结构，为不可修改结构

<ul class="list-ul">

　　<!--an-slide-li 此样式必须添加在li标签上，为js程序判断是否选中的是要操作的dom元素所用-->

　　<li class="list-li an-slide-li">

　　　　<!--z-index-up(z-index:层级最高，且覆盖整个li):对应的dom元素，是为了在触发touchStart事件事，可以选中整个li-->

　　　　<div class="z-index-up" onClick="change('新浪博客')"></div>

　　　　<div>

　　　　　　<div class="list-img">

　　　　　　　　<div>

　　　　　　　　　　<img src="img/Tulips.jpg" />

　　　　　　　　</div>

　　　　　　</div>

　　　　　　<div class="list-contant">

　　　　　　　　<div class="list-contant-title"><label>微博已开通</label></div>

　　　　　　　　<div class="list-contant-text"><label>第一个，我要发博客</label></div>

　　　　　　</div>

　　　　　　<div class="list-time-message">

　　　　　　　　<div class="list-time"><span>10:18</span></div>

　　　　　　　　<div class="list-message"></div>

　　　　　　</div>

　　　　</div>

　　　　<div class="btn" onClick="del('1')">

　　　　　　<div>

　　　　　　　　删除

　　　　　　</div>

　　　　</div>

　　</li>

</ul>

2. js代码讲解；

　　注：该程序主要使用js的三个事件touchstart(手指触摸事件)、startmove(手指移动)、startend(手指离开屏幕)

　　　　请认真阅读以下代码，你会对这三个事件有一个新的认识；让我们一起嗨起来吧！

//在全局运行此程序

window.addEventListener("load", autoLoad, false);

function autoLoad() {

    var initX; //触摸位置

    var initY;

    var moveX; //滑动时的位置

    var moveY;

    var X = 0; //移动距离

    var Y = 0; //y轴移动距离

    var objX, sildeWidth = 0; //目标对象位置、功能按钮width(如删除)

    //yesClick:是否可以点击列表进行下一步操作; xSilde,ySilde 默认xSilde都为true(做上下 ， 左右滑动控制)

    var yesClick, xSilde = true,

    ySilde = true,

    xThink = '1';

    window.sessionStorage.setItem("xThink", xThink); //初始化xThink

    //开始执行程序

    window.addEventListener('touchstart', touchStart, false);

    /*手指触屏时的方法*/

    function touchStart(event) {

        //通过设置的 an-z-index-up 对应dom（目的：可以选中整个li元素） ，获取父元素li ()

        var obj = event.target.parentNode;

        //获取所有的li元素

        var mainLi = document.querySelectorAll(".an-slide-li");

        /*当点击的是功能按钮的话，初始化xThink、anObjX*/

        if (event.target.className.indexOf("an-function-button") != -1) {

            window.sessionStorage.setItem("xThink", '1'); //初始化xThink

            window.sessionStorage.setItem("anObjX", '0');

        }

        /*

*btnStyle: 获取功能按钮，判断一共添加了几个按钮

*btnStyleLength： btnStyle 长度

*setWidth ：btnStyle 按钮宽度

*/

        var btnStyle, btnStyleLength, setWidth;

        sildeWidth = 5;

        //设置默认状态下点击列表可进行下一步

        yesClick = true;

        /*判断如果最终的值小于0 ， 关闭已经出现的动画；禁止li点击事件（此值在end方法中会被重新赋值，再作判断）*/

        var anObjX = window.sessionStorage.getItem("anObjX");

        if (anObjX == null) {

            anObjX = 0;

        }

        if (anObjX < 0) {

            event.preventDefault();

            for (var i = 0; i < mainLi.length; i++) {

                mainLi[i].style.transition = "transform 0.1s"; //延缓动画效果

                mainLi[i].style.transform = "translateX(0rem)";

                mainLi[i].style.WebkitTition = "transform 0.1s"; //延缓动画效果

                mainLi[i].style.WebkitTransform = "translateX(0rem)";

            }

            yesClick = false;

            event.stopPropagation(); //事件冒泡，禁止上下滑动；

        }

        /*判断是否点中删除按钮*/

        if (event.target.parentNode.className === "btn") {

            event.target.parentNode.onclick();

        }

        /*判断手指所在的区域为指定li*/

        if (obj.className.indexOf("an-slide-li") != -1) {

            initX = event.targetTouches[0].pageX; //获取手指触摸x值

            initY = event.targetTouches[0].pageY; //获取手指触摸y值

            objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //获取WebkitTransform 值；

            //自动添加 动画样式

            if (!objX) {

                for (var i = 0; i < mainLi.length; i++) {

                    mainLi[i].style.transition = "transform 0.1s"; //延缓动画效果

                    mainLi[i].style.transform = "translateX(0rem)";

                    mainLi[i].style.WebkitTition = "transform 0.1s"; //延缓动画效果

                    mainLi[i].style.WebkitTransform = "translateX(0rem)";

                    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //获取WebkitTransform 值；

                }

            }

        }

        /*当=0时，执行touchMove命令*/

        //console.log();

        if (objX == 0) {

            obj.addEventListener('touchmove', touchMove, false);

        }

        obj.addEventListener('touchend', touchEnd, false);

    }

    //手指滑动方法

    function touchMove(event) {

        //event.preventDefault();

        /*xThink : 控制当出现动画时（X的最大值），点击其他任何地方动画消失，

         *或继续向左滑动，xThink='0',禁止touchMove事件，

         *触发end事件，则恢复原状xThink='1'

         */

        xThink = window.sessionStorage.getItem("xThink");

        var obj = event.target.parentNode;

        yesClick = false; //滑动时，点击li效果失效

        //判断是否选中的是li

        if (obj.className.indexOf("an-slide-li") != -1) { //&&xThink == '1'

            moveX = event.targetTouches[0].pageX; //获取移动后的最终X值

            moveY = event.targetTouches[0].pageY; //获取移动后的最终Y值

            X = (moveX - initX) / 100; //变化中的X值;

            Y = (moveY - initY) / 100; //变化中的Y值;

            //判断x轴是否可以滑动

            if (xSilde) {

                //如果X轴的变化值大于等于0，WebkitTransform = 0；不进行动画效果，否则，执行

                if (X >= 0 || xThink == '0') {

                    obj.style.WebkitTransform = "translateX(" + 0 + "rem)";

                } else if (X < 0) {

                    event.preventDefault(); //禁止默认滚动事件

                    var l = Math.abs(X); //取绝对值X

                    obj.style.WebkitTransform = "translateX(" + -l + "rem)"; //实现滑动效果，删除按钮出现

                    //判断是否已经超出设置值

                    if (l > sildeWidth) {

                        l = sildeWidth;

                        obj.style.WebkitTransform = "translateX(" + -l + "rem)";

                    }

                }

                //判断X值如果大于15 ， 区分左右滑动还是上下滑动

                if (Math.abs(X) >= 0.15) {

                    Y = 0; //禁止上下滑动

                    ySilde = false; //禁止上下滑动

                    //yThink = false;//禁止上下滑动

                    event.preventDefault(); //禁止上下滑动

                }

            }

            /*如果出现向左滑动动画，则在手指离开屏幕之前，不可以上下滚动*/

            if (ySilde) { //判断y轴是否可以滑动

                if (Math.abs(Y) >= 0.15) {

                    X = 0; //禁止 左右 滑动

                    obj.style.WebkitTransform = "translateX(" + 0 + "rem)";

                    xSilde = false; //禁止 左右 滑动

                    //event.preventDefault();

                }

            }

        }

    }

    /*手指离开屏幕方法*/

    function touchEnd(event) {

        event.preventDefault();

        var obj = event.target.parentNode;

        xSilde = true;

        ySilde = true;

        if (obj.className.indexOf("an-slide-li") != -1) {

            objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1;

            //放开手时，判断objX最终值，如果大于按钮中间值，则使按钮恢复隐藏状态；反之；

            if (objX > -(sildeWidth / 4)) {

                obj.style.WebkitTransform = "translateX(" + 0 + "rem)";

                objX = 0;

                xThink = '1';

                window.sessionStorage.setItem("xThink", xThink);

                window.sessionStorage.setItem("anObjX", objX);

                //yesClick = true;

            } else {

                obj.style.WebkitTransform = "translateX(" + -sildeWidth + "rem)";

                objX = -sildeWidth;

                window.sessionStorage.setItem("anObjX", objX);

                yesClick = false; //禁止点击li事件

                xThink = '0';

                window.sessionStorage.setItem("xThink", xThink);

            }

        }

        sildeWidth = 0;

        //点击li后需要执行的方法

        if (event.target.className === "an-z-index-up" && yesClick) {

            // scope.goClick();

            window.sessionStorage.setItem("anObjX", '0');

        }

    }

}

3.style / css

* {

    padding:0;

    margin:0;

    list-style:none;

}

body {

    background:#FFFFF0;

}

header {

    width:100%;

    background:#00CED1;

    border-bottom:1px solid #ccc;

    position:fixed;

    top:0;

    left:0;

    z-index:1;

}

header h2 {

    text-align:center;

    line-height:4rem;

    font-size:16px;

    color:#fff

}

.list {

    padding-top:4.1rem;

}

.list-ul {

    top:5px;

    overflow:hidden;

}

.list-li {

    height:3.8rem;

    /*width:100%;

    */

line-height:3.8rem;

    border-bottom:1px solid #dcd6d6;

    position:relative;

    padding:0 8px;

    color:#666;

    background:#FFFFF0;

    -webkit-transform:translateX(0px);

    transition:transform 0.2s;

    -webkit-transition:transform 0.2s;

    /*3d加速*/

webkit-transform:translate3d(0,0,0);

    -moz-transform:translate3d(0,0,0);

    -ms-transform:translate3d(0,0,0);

    -o-transform:translate3d(0,0,0);

    transform:translate3d(0,0,0);

}

.z-index-up {

    z-index:9999;

    width:100%;

    height:3.8rem;

    padding:0;

    position:absolute;

    /* background:red;

    */

}

/* 头像 */

.list-li .list-img {

    float:left;

    width:15%;

    padding-top:.49rem;

}

.list-li .list-img div {

    width:2.8rem;

    height:2.8rem;

    padding-left:.2rem;

    /*background:url("../img/Tulips.jpg") no-repeat center;

    */

/*border:0;

    */

/*border-radius:50%;

    */

}

.list-li .list-img div img {

    width:2.8rem;

    height:2.8rem;

    border-radius:50%;

}

/* 文字内容 */

.list-li .list-contant {

    float:left;

    width:65%;

    padding-top:0.25rem;

    padding-left:.4rem;

}

.list-li .list-contant .list-contant-title {

    height:1.7rem;

    line-height:2rem;

}

.list-li .list-contant .list-contant-title label {

    font-size:14px;

    font-weight:bold;

}

.list-li .list-contant .list-contant-text {

    height:1.7rem;

    line-height:1.3rem;

}

.list-li .list-contant .list-contant-text label {

    font-size:12px;

}

/* 时间 消息提醒 */

.list-time-message {

    float:left;

    width:16%;

    padding-top:0.25rem;

    padding-left:.46rem;

}

.list-time-message .list-time {

    float:left;

    height:1.7rem;

    width:100%;

    line-height:1.7rem;

    font-size:10px;

    text-align:right;

}

.list-time-message .list-time span {

    padding-right:.8rem;

}

.list-time-message .list-message {

    float:left;

    /* height:1.7rem;

    line-height:1.7rem;

    */

}

/* 按钮 */

.btn {

    position:absolute;

    top:0;

    right:-80px;

    text-align:center;

    background:#FF0000;

    border-bottom:1px solid #FF0000;

    color:#fff;

    width:80px;

    height:3.8rem;

    line-height:3.8rem;

}

.btn div {

    /*padding-right:.6rem;

    */

}

/* 提示框 */

.contant-prompt {

    width:100%;

    text-align:center;

    z-index:1;

    opacity:0.9;

    display:none;

}

.contant-prompt .prompt {

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:2rem;

    text-align:center;

    font-size:12px;

    line-height:2rem;

    background:#777171;

    /* border-radius:8%;

    */

}

.contant-prompt .prompt div {

    color:#fff;

    font-weight:700;

    padding-left:.3rem;

    padding-right:.3rem;

}

最后，欢迎IT同事好友朋友们，互相指教，进步！

巴特西

js高仿QQ消息列表左滑功能

最新文章

热门文章