仿QQ左滑出现删除，只能有一条记录显示有左滑js实现

来源：互联网发布：linux c sleep函数编辑：程序博客网时间：2024/04/30 08:20

</pre><pre name="code" class="html">    这几天做一个app涉及到仿QQ的左滑，通过查资料，看博文，终于站在巨人的肩膀上用js实现了。该文实现了只能有一条记录的左滑，简单实用，在这里与大家共享，代码还有很多不足和要改进的地方，望各位提出来，我们不断改进，一起进步！

<!doctype html><html>    <head>        <meta charset="utf-8">        <title>左划出现删除按钮，右滑隐藏</title>        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>        <script type="text/javascript">            $(document).ready(function(e) {                // 设定每一行的宽度=屏幕宽度+按钮宽度                $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());                // 设定常规信息区域宽度=屏幕宽度                $(".line-normal-wrapper").width($(".line-wrapper").width());                // 获取所有行，对每一行设置监听                var lines = $(".line-scroll-wrapper");                var len = lines.length;                var lastX,lastXForMobile;                // 用于记录被按下的对象                var pressedObj;                //定义一个用于存储滑动过的对象的数组                var pressedObj1=[];                // 用于记录按下的点                var start;                // 网页在移动端运行时的监听                for (var i = 0; i < len; ++i) {                    lines[i].addEventListener('touchstart', function(e) {                        lastXForMobile = e.changedTouches[0].pageX;                        //记录手指触摸点的横坐标                        pressedObj = this;                        // 记录被按下的对象                        // 记录开始按下时的点                        var touches = event.touches[0];                        start = {                            x : touches.pageX, // 横坐标                            y : touches.pageY // 纵坐标                        };                    });                    lines[i].addEventListener('touchmove', function(e) {                        // 计算划动过程中x和y的变化量                        var touches = event.touches[0];                        delta = {                            x : touches.pageX - start.x,                            y : touches.pageY - start.y                        };                        // 横向位移大于纵向位移，阻止纵向滚动                        if (Math.abs(delta.x) > Math.abs(delta.y)) {                            event.preventDefault();                        }                    });                    lines[i].addEventListener('touchend', function(e) {                        var diffX = e.changedTouches[0].pageX - lastXForMobile;                        if (diffX < -100) {                            for(var i = 0; i < pressedObj1.length; ++i){                                $(pressedObj1[i]).animate({marginLeft:"0"}, 500);                                //清空数组                                if(i==(pressedObj1.length-1)){                                    pressedObj1=[];                                }                            }                            $(pressedObj).animate({marginLeft : "-132px"}, 500);// 左滑                            pressedObj1.push(this);                             //记录被滑的这个对象，已被下一次滑动删除这个对象的左移效果                        } else if (diffX > 100) {                            $(pressedObj).animate({marginLeft : "0"}, 500);// 右滑                        }                    });                }                // 网页在PC浏览器中运行时的监听                for (var i = 0; i < len; ++i) {                    $(lines[i]).bind('mousedown', function(e) {                        lastX = e.clientX;                        pressedObj = this;                        // 记录被按下的对象                    });                    $(lines[i]).bind('mouseup', function(e) {                        var diffX = e.clientX - lastX;                        if (diffX < -150) {                            for (var i = 0; i < len; ++i) {                                var pressedObj111 = lines[i];                                $(pressedObj111).animate({                                    marginLeft : "0"                                }, 100);                                if(i==(pressedObj1.length-1)){                                    pressedObj1=[];                                }                            }                            $(pressedObj).animate({                                marginLeft : "-101px"                            }, 500);                            // 左滑                        } else if (diffX > 150) {                            $(pressedObj).animate({                                marginLeft : "0"                            }, 500);                            // 右滑                        }                    });                }            });        </script>        <style type="text/css">            * {                margin: 0;                padding: 0;            }            .line-wrapper {                width: 100%;                overflow: hidden;                font-size: 1.3em;                border-bottom: 1px solid #aaa;                padding-top: 0.3em;                padding-bottom: 0.3em;            }            .line-scroll-wrapper {                white-space: nowrap;            }            .line-btn-delete {                float: left;                width: 2em;                font-size: 0.8em;                padding-top: 0.3em;                padding-bottom: 0.3em;            }            .line-normal-wrapper {                display: inline-block;                float: left;            }        </style>    </head>    <body>                <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                                                                        轻松的方式符合us                                    </div>                <div class="line-btn-delete">                                                            删除123                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                            轻松的方式符合us                                    </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                            轻松的方式符合us个我                                    </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                                                            轻松的方式符合u                                   </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                            轻松的方式                                    </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                          轻松的方式                                    </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                           轻松的方式符                                   </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>        <div class="line-wrapper">            <div class="line-scroll-wrapper">                <div class="line-normal-wrapper">                                           轻松的方式符合                                   </div>                <div class="line-btn-delete">                    删除                </div>            </div>        </div>    </body></html>

1 0