点赞的两种实现效果

本章主要记录点赞的两种效果：

点赞效果1：

实现类似如下的点赞+1,数字从下往上飘动的动画（JS实现+CSS3实现）。

点赞+1飘动动画.gif

点赞效果2：

点赞变红心，同时数字+1；再次点击是变白心，同时数字-1；实现效果图如下：

点赞+1再次点击-1.gif

接下来看一下如何实现：

一、点赞效果1

点赞+1飘动动画.gif

（方法一：JS实现；方法二：jQuery实现）

方法一：JS实现
核心代码：

 function and(e) {
        var $i = $("<b>").text("+" + 1);
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            top: y - 20,
            left: x,
            position: "absolute",
            color: "#E94F06"
        });
        $("body").append($i);
        $i.animate({
            top: y - 120,
            opacity: 0,
            "font-size": "1.4em"
        }, 1500, function() {
            $i.remove();
        });
        e.stopPropagation();
    }

完整代码如下：(要引入jQuery)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"> 
    <title>点赞+1飘动动画</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            margin: 100px;
        }
    </style>
</head>

<body>
    <div>
        <a href="javascript:void(0)" class="up_icon">点赞</a>
    </div>

</body>
<script>
    $(".up_icon").on("click", function(e) {
        and(e);
    })

    function and(e) {
        var $i = $("<b>").text("+" + 1);
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            top: y - 20,
            left: x,
            position: "absolute",
            color: "#E94F06"
        });
        $("body").append($i);
        $i.animate({
            top: y - 120,
            opacity: 0,
            "font-size": "1.4em"
        }, 1500, function() {
            $i.remove();
        });
        e.stopPropagation();
    }
</script>

</html>

方法二：CSS3动画(推荐)
通过css3动画改变+1的位置、动画和透明度。
核心代码：

   @keyframes flutter {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
                top: -30px;
            }
        }

完整代码：

<!DOCTYPE html>
<html lang="en">

<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>点赞+1效果</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            margin: 100px;
        }
        
        .up_icon {
            font-size: 40px;
            position: relative;
            cursor: pointer;
        }
        
        span {
            font-size: 25px;
            font-weight: normal;
            color: red;
            position: absolute;
            top: 0;
            left: 50%;
            opacity: 0;
        }
        
        .active span {
            -webkit-animation: flutter 1s ease-in-out;
            animation: flutter 1s ease-in-out;
            /* ease-in-out：动画以低速开始和结束 */
        }
        /* +1飘动的动画 */
        
        @keyframes flutter {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
                top: -30px;
            }
        }
    </style>
</head>

<body>
    <div>
        <a href="javascript:void(0)" class="up_icon">点赞<span>+1</span></a>
    </div>
    <script>
        $(".up_icon").on("click", function() {
            if (!$(this).is(".active")) {
                $(this).addClass("active");
            }
        })
    </script>
</body>

</html>

二、点赞效果2

点赞效果图.gif

1. 素材准备：

开发前准备红心/白心两张图片

love_red.png

love_white.png

2. 开发

HTML:（注意要引入jQuery）

 <!-- like_icon -->
        <div class="likeIcon-wrap">
            <div class="like-icon" data-key="on"></div>
            <div class="like-num">1</div>
        </div>

CSS:(仅供参考，具体根据你自己的项目来)

 body{
            background: grey;
        }
        .likeIcon-wrap {
            position: fixed;
            right: 20px;
            bottom: 300px;
            z-index: 5;
        }

        .like-icon {
            width: 68px;
            height: 62px;
            z-index: 7;
            background: url("./images/love_white.png") no-repeat center;
            background-size: 68px 62px;
        }

        .on {
            background: url("./images/love_red.png") no-repeat center;
            background-size: 68px 62px;
        }

        .like-num {
            width: 68px;
            height: 34px;
            margin-top: 10px;
            color: #ebebeb;
            text-align: center;
            font-size: 30px;
        }

jQuery:（重点部分）

思路：

1）、点击切换图片：

通过给like-icon一个自定义属性data-key=‘on’,来控制图片的切换；
①如果data-key=on，那么就给like-icon新增一个类on（这个on要在css中写好，就是你替换的图片地址）；
②增加类名on之后再移除data-key的值，可以设置为空，即$('.like-icon').attr('data-key', '');；

2）、点击数字+1

①获取like-num的值并转换成数字：var like_num = Number($('.like-num').html());
②将like-num的数字+1： like_num = like_num + 1;
③输出like-num加1后的值： $('.like-num').html(like_num);

具体参考代码如下：

$(document).ready(function () {
    // likeClickCount
    $(".like-icon").on('click', function () {
        likeClickCount();
    })
})
// likeClickCount
function likeClickCount() {
//Number函数将对象的值转换成数字
    var like_num = Number($('.like-num').html());
    if ($('.like-icon').attr('data-key') == 'on') {
        $('.like-icon').addClass('on');
        // like-num add 
        like_num = like_num + 1; 
        $('.like-num').html(like_num);
        $('.like-icon').attr('data-key', '');
    } else {
        $('.like-icon').removeClass('on');
        like_num = like_num - 1;
        $('.like-num').html(like_num);
        $('.like-icon').attr('data-key', 'on');
    }
}

3、最后实现效果

点赞+1再次点赞-1.gif

补充：
但是在实际项目中，这些点赞数是需要从后端接口获取的，这很简单，直接使用ajax获取就可以啦，如：
json数据格式：

{
    "stat":1,
    "subCode":0,
    "data":{
        "praiseCnt":"1146"
    },
}

获取接口点赞数

// ajax data
var videoUrl = "接口地址";

$.ajax({
    type: "get",
    url: videoUrl,
    dataType: "json",
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (data) {
        var data = data.data;
        $('.like-num').html(data.praiseCnt);
    }
})

不定期笔记整理的日常~对你有用就点个❤吧