利用jQuery实现用户名片小动画

最新推荐文章于 2019-03-30 15:50:27 发布

你华还是你华

最新推荐文章于 2019-03-30 15:50:27 发布

阅读量823

点赞数

分类专栏： jQuery项目文章标签： jQuery动画 jQuery个人名片

本文链接：https://blog.csdn.net/weixin_44103733/article/details/88846449

版权

jQuery项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我爱撸码，撸码使我感到快乐！

大家好，我是Counter。下面给大家介绍利用jQuery实现的小动画，非常的简便，如果有原生js操作的话，那么就不止这么多行了。至于CSS，个人觉得，这边CSS布局也蛮重要的，所以有一些也加上了注释，主要为jQuery的注释，本节用到了jQuery的链式调用，以及事件委托代理，以及标签的动态生成。欢迎一起技术探讨，一起成长。
实现的效果: 当你点击屏幕出现的个人头像或者名字，都会缓慢向下出现个人简介，并且当你再次点击时个人简介收回去。当你点击上方的 + 时可以创建属于你自己的个人名片，并且是一定要输入名字和简介的否则不会生成名片，至于头像，可以通过网络上免费的头像来填入图像的url，好了，话不多说，点击查看效果

代码给出：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <!-- CSS样式 -->
    <style>
        /* 最完成div居中 */
        .wrapper {
            position: absolute;
            left: 50%;
            margin-left: -150px
        }
        .item {
            width: 300px;
            padding: 20px 0;
            margin-top: 10px;
            background-color: #bbb;
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
        }
        .item .img {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin-left: 20px;
            border-radius: 50%;
            /* 使图片居中 */
            vertical-align: middle;
            overflow: hidden;
        }
        .img img {
            width: 100%;
            height: 100%
        }
        .item h3 {
            display: inline-block;
            margin-left: 20px;
        }
        .item p {
            display: none;
            margin: 20px;
            /* 使长单词也能够换行 */
            word-wrap: break-word;
        }
        /* 弹层充满第一屏 */
        .hide {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        .alert {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -145px;
            /* Y轴方向向上移动自身高度的一半 */
            transform: translateY(-50%);
            width: 250px;
            padding: 20px;
            border-radius: 20px;
            background-color: #fff;
            text-align: center;
            /* 弹层位于所有基本元素上面 */
            z-index: 1000;
        }
        .alert input {
            width: 200px;
            height: 30px;
            margin: 20px 0;
            border: none;
            border-bottom: 1px solid #888;
            outline: none;
            color: #FF6700
        }
        .alert .ok {
            width: 50px;
            height: 50px;
            margin-left: 100px;
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .add {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
            background-color: #ccc;
            color: #fff;
            font-size: 20px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="add">+</div>
    <div class="wrapper">
        <div class="item">
            <div class="img">
                <img src="http://img2.imgtn.bdimg.com/it/u=2060761043,284284863&fm=26&gp=0.jpg" alt="">
            </div>
            <h3>Counter</h3>
            <p>Counter爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码，爱撸码。</p>
        </div>
    </div>
    <!-- jQuery，已经引入在线载入，这边注释了 -->
    <!-- <script src="../jquery-3.3.1.js"></script> -->
    <script>
        // 事件委托代理，如果绑定在现有dom基础上，那么将印象后面通过jQuery生成的dom，导致后面用户自己生成的名片点击不会出现和隐藏
        $('body').on('click', '.item', function () {
            $(this).find('p').slideToggle();
            // 链式调用。// 事件委托代理，因为这边的弹层是用户点击添加时才加入到html当中，所有这边需要使用到事件代理，否则的话绑定在后来添加上的dom中不生效
        }).on('click', '.ok', function () {
            // 获取用户输入的值，然后插入到wrapper类名的元素中
            var name = $('.yourName').val();
            var img = $('.image-url').val();
            var card = $('.yourCard').val();
            // 判读如果用户输入的名字与简介不为空的话就创建用户名片
            if (name != "" && card != "") {
                var str = '<div class="item">\
                                            <div class="img">\
                                                <img src=" ' + img + ' " alt="">\
                                            </div>\
                                            <h3> ' + name + '</h3>\
                                            <p>' + card + '</p>\
                                        </div>'
                $('.wrapper').append(str);
                $('.hide').add('.alert').fadeOut();
                // 退出后将输入框都设为空
                $('.yourName').add('.image-url').add('.yourCard').val('');
            }
            // 否则弹窗提示用户
            else {
                $('.hide').add('.alert').fadeOut();
                setTimeout(function () {
                    alert('请输入名字与简介！');
                },500);
            }
        })

        // 只点击一次触发，所以绑定one，没有必要每次点击，每次都生成一个弹层
        $('.add').one('click', function () {
            var str = '<div class="hide"></div>\
                            <div class="alert">\
                                <input class="yourName" type="text" placeholder="你的名字">\
                                <input class="image-url" type="text" placeholder="头像url">\
                                <input  class="yourCard" type="text" placeholder="你的简介">\
                                <div class="ok">ok</div>\
                        </div>'
            $('body').append(str);
            // 链式调用。//每次点击弹层都是需要缓慢出现的
        }).on('click', function () {
            $('.hide').add('.alert').fadeIn();
        })

    </script>
</body>
</html>

你华还是你华

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用jQuery实现用户名片小动画

我爱撸码，撸码使我感到快乐！大家好，我是Counter。下面给大家介绍利用jQuery实现的小动画，非常的简便，如果有原生js操作的话，那么就不止这么多行了。至于CSS，个人觉得，这边CSS布局也蛮重要的，所以有一些也加上了注释，主要为jQuery的注释，本节用到了jQuery的链式调用，以及事件委托代理，以及标签的动态生成。欢迎一起技术探讨，一起成长。实现的效果: 当你点击屏幕出现的个人头像...
复制链接

扫一扫