点赞的两种实现效果

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

• 点赞效果1：

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

点赞+1飘动动画.gif

• 点赞效果2：

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

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

接下来看一下如何实现：

一、点赞效果1

点赞+1飘动动画.gif

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

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

 function and(e) {
        var $i = $("").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)

     
    
    
    



    

        点赞
    

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

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

完整代码：

    
    
    
    
    
    



    

        点赞+1
    
    

二、点赞效果2

点赞效果图.gif

1. 素材准备：

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

love_red.png

love_white.png

2. 开发

HTML:（注意要引入jQuery）

 
        

            

            
1
        

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);
    }
})

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