两种达到点赞效果的方法
本章主要记录点赞的两种效果:
- 点赞效果1:
实现类似如下的
点赞+1
,数字从下往上飘动的动画(JS实现+CSS3实现)。
- 点赞效果2:
点赞变红心,同时数字+1;再次点击是变白心,同时数字-1;实现效果图如下:
接下来看一下如何实现:
一、点赞效果1
(方法一: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
1. 素材准备:
开发前准备红心/白心两张图片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、最后实现效果
补充:
但是在实际项目中,这些点赞数是需要从后端接口获取的,这很简单,直接使用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);
}
})
不定期笔记整理的日常~对你有用就点个❤吧
上一篇: Selenium处理网页跳转的方法
下一篇: 使用Java进行网页跳转的方法
推荐阅读
-
两种达到点赞效果的方法
-
为文本添加渐变、描边和投影效果的两种方法(CSS 和 SVG)
-
在 Android 中实现图像叠加效果的两种方法
-
单链表创建--头部插入法创建带头部节点的单链表,超详细--头部插入法和尾部插入法,这里记录头部插入法创建带头部节点的单链表的具体过程: 以 C 语言为例。 1)首先使用 typedef 关键字定义节点数据类型 1 typedef struct LNode{ 2 int var; // 以整数数据为例 3 struct LNode* next; // 需要定义一个 LNode 结构指针,即指向后继节点的节点指针 4 }LNode, *LinkList. 第 4 行中的 LNode 和 *LinkList 是可选的,但如果有了它们,以后再定义节点和指针变量会更方便,而且不必在 LNode 前面添加 struct 关键字,而是可以直接这样定义变量。 LNode l1, l2; // 定义节点变量。 LinkList p1, p2; // 定义指针变量。 与上述 typedef 关键字定义的单一链表数据类型的方法相同: struct LNode{ struct LNode* next; //定义指针变量 struct LNode* next; } } 如果使用这种方法定义链表节点的类型,则在定义节点变量和指针变量时,必须在 LNode 前面加上 struct 关键字,即 struct LNode l1, l2; // 定义节点变量 struct LNode *p1, *p2; //define pointer variables. 这两种方法的效果是一样的,都是定义一个包含整数变量数据字段和后续指针字段的单一链表节点类型。 (2)通过表头插入的函数构建一个链表,并返回 LinkList 类型表头指针变量 L。 算法的基本思想:一个有头节点的单链表有两类节点,头节点和元素节点,头节点通常不存储数据,用 L 表示,元素节点存储数据,用 s 表示。 2.1 定义头节点指针变量 L 和元素节点 s
-
腾讯视频直播 02-推流-美颜滤镜 同样,腾讯云提供了 setBeautyFilter 方法来设置美颜风格、磨皮程度、美白程度和泛红程度 //style 磨皮风格:0:平滑 1:自然 2:朦胧 //美容级别:0-9。值为 0 时关闭美颜效果。默认值:0,关闭美颜效果。 //美白级别:取值 0-9。值为 0 时,将关闭美白效果。默认值:0,关闭美白效果。 //ruddyLevel:取值范围为 0-9。值为 0 时关闭美白效果。默认值:0,关闭美白效果。 public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel);; public boolean setBeautyFilter(int style, int beautyLevel, int whiteningLevel, int ruddyLevel) 滤镜 setFilter 方法可以设置滤镜效果,滤镜本身是一个直方图文件。setSpecialRatio 方法可以设置滤镜的程度,从 0 到 1,越大滤镜效果越明显,默认值为 0.5。 Bitmap bitmap = BitmapUtils.decodeResource(getResources, R.drawable.langman); if (mLivePusher) if (mLivePusher ! = null) { mLivePusher.setFilter(bmp); } 控制摄像头 腾讯云 sdk 默认为前置摄像头(可以通过修改 TXLivePushConfig 的配置函数 setFrontCamera 来修改默认值),调用一次 switchCamera 就切换一次,注意切换摄像头前要确保 TXLivePushConfig 和 TXLivePusher 对象已经初始化。 mLivePushConfig.setFrontCamera(true); // 默认前置摄像头。 mLivePusher.switchCamera; //切换摄像头。 ⑦ 设置徽标水印 腾讯视频云目前支持两种设置水印的方式:一种是在流媒体 SDK 中设置水印,原理是在 SDK 中对视频进行编码前在画面中设置水印。另一种方式是在云端设置水印,即由云端解析视频并添加水印标识。 建议使用 SDK 添加水印,因为在云端添加水印会有问题。下面是添加水印的 SDK 介绍: //设置视频水印 mLivePushConfig.setWatermark(BitmapFactory.decodeResource(getResources,R.drawable.watermark), 10, 10); // 最后两个参数是视频的水印。 //最后两个参数是水印位置的 X 轴和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig); 如果需要对水印图像的位置进行模型适配,则需要调用水印规范化接口。 /设置视频水印 mLivePushConfig.setWatermark(mBitmap, 0.02f, 0.05f, 0.2f); //参数为水印图像。 //参数包括水印图像的位图、水印位置的 X 轴坐标、水印位置的 Y 轴坐标和水印宽度。后三个参数的范围是 [0,1]。 // 最后两个参数是水印位置的 X 轴坐标和 Y 轴坐标。 mLivePusher.setConfig(mLivePushConfig); TXLivePushConfig 中的 setHardwareAcceleration 方法可以启用或禁用硬件编码。 if (mHWVideoEncode){ if (mLivePushConfig ! = null) { if (Build.VERSION.SDK_INT < 18){ Toast.makeText(getApplicationContext, "Hardware acceleration failed, current phone API level is too low (min 18)"、 Toast.LENGTH_SHORT).show; mHWVideoEncode = false; } } } } mLivePushConfig.setHardwareAcceleration(mHWVideoEncode ? TXLiveConstants.ENCODE_VIDEO_HARDWARE : TXLiveConstants.ENCODE_VIDEO_SOFTWARE); mLivePusher.setConfig(mLivePushConfig); // 如果您不确定何时启用硬件加速,建议将其设置为 ENCODE_VIDEO_AUTO。 // 默认情况下启用软件编码,但如果手机的 CPU 使用率超过 80% 或帧速率为 10,SDK 将自动切换到硬件编码。 ⑨ 后台推流 在常规模式下,一旦应用程序进入后台,摄像头捕捉数据的能力就会被 Android 禁用,这意味着 SDK 无法继续捕捉和编码音频和视频数据。如果我们什么都不做,故事就会按照下面的脚本发展: 阶段 1(背景剪切后 10 秒 ->)- CDN 无法将视频流传输给观众,因为没有数据,观众看到的是主帧。 阶段 2(10 秒-> 70 秒)--观众一方的播放器因无法接收到直播流而退出,房间里空无一人。 第 3 阶段(70 秒后)--服务器直接断开了推送流媒体的 RTMP 链接,主播需要重新打开直播才能继续。 主播可能只是短暂地接了一个紧急电话,但各云提供商的安全措施会迫使主播的直播提前结束。 1) 设置 setPauseFlag 在开始推流之前,使用 TXLivePushConfig 的 setPauseImg 接口设置一个等待图像,其含义建议为 "主播将暂时离开,稍后再回来"。
-
超赞的手机机器学习资源:超过一万颗星星的吴恩达课程笔记和《统计学习方法》代码实现在Github上等你!