本章主要记录点赞的两种效果：
- 点赞效果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);
}
})
不定期笔记整理的日常~对你有用就点个❤吧
网友评论