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同事好友朋友们，互相指教，进步！

时间： 2024-04-23 19:19:06

js高仿QQ消息列表左滑功能的相关文章

Android高仿QQ消息滑动删除(附源码)

大家都应该使用过QQ吧,他的消息中可以滑动删除功能,我觉得比较有意思,所以模仿写了一个,并且修改了其滑动算法.我先贴几个简单示范图吧 其实主要用的是算法以及对ListView的把控. 一下是适配器的类 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

【Android】史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53157090 本文出自:[张旭童的博客](http://blog.csdn.net/zxt0601) 代码传送门:喜欢的话,随手点个star.多谢 https://github.com/mcxtzhang/SwipeDelMenuLayout 重要的话 开头说,not for the RecyclerView or L

史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView.ListView,而是任意的ViewGroup里的childView都可以使用侧滑(删除)菜单.支持任意ViewGroup.0耦合.史上最简单. 概述 本控件从撸出来在项目使用至今已经过去7个月,距离第一次将它push至github上,也已经2月+.(之前,我发表过一篇文章.传送门:http://b

高仿QQ即时聊天软件开发系列之二登录窗口界面

继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因为我没玩过WPF所以难,因为感觉做出来之后也就那样 整体布局 整体是上下分,下面是左中右分 1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="27"><!--用于放窗口右上角关闭.最

高仿QQ的个性名片

效果图 中间的圆形头像和光环波形讲解请看:http://blog.csdn.net/cj_286/article/details/52839036 周围的气泡布局,因为布局RatioLayout是继承自ViewGroup,所以布局layout就可以根据自己的需求来布局其子view,view.layout(int l,int t,int r,int b);用于布局子view在父ViewGroup中的位置(相对于父容器),所以在RatioLayout中计算所有子view的left,top,right

高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输入时显示一个提示字符串.由于Background对ComboBox无效,所以直接通过Background来实现是不行了.需要重新写ComboBox的模板,也就是Template,自定义一个模板来实现这个结果.又看了一下QQ的下拉框,这玩意不自定义也难以实现,所以就干脆自定义了. 先上代码,先是Com

高仿QQ即时聊天软件开发系列之一开端

前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部分的源码也给封装到OMCS里面了,这两家伙都是收费的Orz,还能不能好好的看看源码L 大概看了一下GG(为什么每次念这个词都有种怪怪的感觉)的源码,突然想自己也来弄个高仿QQ的软件,平时时间也比较多,就当锻炼吧.别人GG都有个名字,那我也起个名字吧,就叫CC吧 决定了就开始安排 第一个问题,界面框架

关于高仿微信对话列表滑动删除效果代码优化

原文:http://blog.csdn.net/singwhatiwanna/article/details/17515543 最近公司项目需用到微信滑动拉出按钮的效果,发现一位牛人已经实现了相关效果,但控件仍与业务代码存有耦合,于是花了点时间做了些去耦合,并于此进行记录,以防遗忘. 个人认为耦合主要在于两点: 第一点是SlideListView中的onTouchEvent 通过获取item间接得到SlideView,但这样会引入外部数据类MessageItem.          @Overr

Android 利用ExpandableListView显示和查询仿QQ分组列表用户信息

在我们的项目开发过程中,经常会对用户的信息进行分组,即通过组来显示用户的信息,同时通过一定的查询条件来显示查询后的相关用户信息,并且通过颜色选择器来设置列表信息的背景颜色. 其中借鉴xiaanming:http://blog.csdn.net/xiaanming/article/details/12684155 下面来看看项目运行后的效果图以及代码结构图: 下面通过代码来实现整个效果. 1.主界面布局activity_main.xml <span style="font-size:18px