仿QQ左滑删除

最新推荐文章于 2024-05-26 09:32:48 发布

樊小书生

最新推荐文章于 2024-05-26 09:32:48 发布

阅读量960

点赞数

分类专栏： jQuery 文章标签：插件

本文链接：https://blog.csdn.net/fxss5201/article/details/74162068

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

QQ作为现在一个社交软件，其内功能相当强大，并且还有很多人性化的交互，今天主要说的就是仿QQ的左滑删除。

首先我们使用的是Snap.js的一个插件，GitHub地址https://github.com/jakiestfu/Snap.js，所有内容都可以从上面看到，好像也没有什么好说的（主要是我的英语水平有待提高/(ㄒoㄒ)/~~）下面直接放例子吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左滑删除</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul class="snap-box">
    <li class="snap-item">
        <div class="item-content js-item-content">好友1好友1好友1好友1好友1</div>
        <div class="snap-drawers clearfix">
            <div class="snap-drawer js-delect">删除</div>
        </div>
    </li>
    <li class="snap-item">
        <div class="item-content js-item-content">好友2好友2好友2好友2好友2</div>
        <div class="snap-drawers clearfix">
            <div class="snap-drawer js-delect">删除</div>
        </div>
    </li>
    <li class="snap-item">
        <div class="item-content js-item-content">好友3好友3好友3好友3好友3</div>
        <div class="snap-drawers clearfix">
            <div class="snap-drawer js-delect">删除</div>
        </div>
    </li>
    <li class="snap-item">
        <div class="item-content js-item-content">好友4好友4好友4好友4好友4</div>
        <div class="snap-drawers clearfix">
            <div class="snap-drawer js-delect">删除</div>
        </div>
    </li>
    <li class="snap-item">
        <div class="item-content js-item-content">好友5好友5好友5好友5好友5</div>
        <div class="snap-drawers clearfix">
            <div class="snap-drawer js-delect">删除</div>
        </div>
    </li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/Snap.js"></script>
<script>
$(function(){
    $.each($(".js-item-content"), function(i, n){
        var snapper = new Snap({
            element: $(n)[0],
            disable: 'left',
            addBodyClasses: true,
            maxPosition: 60,
            minPosition: 60
        });
    });
    $(".js-delect").on("click", function(){
        $(this).parentsUntil("li").parent().remove();
    });

})
</script>
</body>
</html>

index.css

html,
body {
    font-family: "Microsoft YaHei";
    font-size: 12px;
    color: #333;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.snap-box {
    width: 375px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
    overflow: hidden;
}

.snap-item {
    position: relative;
    left: 0;
    top: 0;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    border-top: 1px solid #ccc;
}
.snap-box .snap-item:nth-child(1) {
    border-top: 0;
}
.item-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    padding-left: 10px;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.snap-drawers {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
}
.snap-drawer {
    float: right; 
    width: 60px;
    background-color: #f00;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

其中关键要注意的是要注意这两处的布局：，最后是设置，如果想要较好的交互操作体验，建议好好看一下这里的配置参数，好好设置。

樊小书生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿QQ左滑删除

QQ作为现在一个社交软件，其内功能相当强大，并且还有很多人性化的交互，今天主要说的就是仿QQ的左滑删除。首先我们使用的是Snap.js的一个插件，GitHub地址https://github.com/jakiestfu/Snap.js，所有内容都可以从上面看到。
复制链接

扫一扫

专栏目录