站长资源
点赞如今在网络上可以说是随处可见，怎么和粉丝互动，那可不就是刷屏，关注，点赞吗。
今天我们就来看看如何实现这个点赞小功能
1、首先有个点赞的手型图标
2、点击后需要再原有的点赞基础上+1
3、这个+1和点赞的图标要稍微有点逼格(加点小动画)
先来写个基础的html结构
<div class="praise"> <span id="praise"><img src="http://www.wangdahai.cn/web_view/00104/zan.png" id="praise-img"></span> <span id="praise-txt">666</span> <span id="add-num"><em>+1</em></span> </div>
配上适当的css样式
.praise{
width:40px;
height:40px;
margin: 50px auto;
cursor: pointer;
font-size: 12px;
text-align:center;
position: relative;
}
#praise{
display:block;
width:40px;
height:40px;
margin:0 auto;
}
#praise-txt{
height:25px;
line-height:25px;
display: block;
}
.praise img{
width:40px;
height:40px;
display:block;
margin: 0 auto;
}
我们来详细讲解如何实现点击后的逻辑处理
首先定义几个我们需要获取的变量
var text_box = $("#add-num");//+1
var praise_txt = $("#praise-txt");//原有点赞数
var num = parseInt(praise_txt.text());//转成整数，因为之后要++
要实现功能其实很简单，只需让num++然后替换原有的值
num += 1; praise_txt.text(num)
添加完以上代码，我们来看下效果
功能是有了，但是怎么看也不像是点赞，~~~~(>_<)~~~~，有点呆若木鸡的感觉
其实功能部分我们已经写完了，就是这么简单，需要让他动起来，那就加点css动画吧
//+1当然开始是没有的，隐藏掉
#add-num{
display:none;
}
.praise img.animation{
animation: myfirst 0.5s;
}
#add-num .add-animation{
color: #000;
position:absolute;
top:-15px;
left: 10px;
font-size: 15px;
opacity: 0;
animation: mypraise 0.5s ;
font-style:normal;
}
//点击后加个类颜色变一变
#add-num .add-animation.hover , #praise-txt.hover{
color: #EB4F38;
}
/*点赞图标放大动画*/
@keyframes myfirst
{
0%{
width:40px;
height:40px;
}
50%{
width:50px;
height:50px;
}
100% {
width:40px;
height:40px;
}
}
/*点赞数量加减动画*/
@keyframes mypraise
{
0%{
top:-15px;
opacity: 0;
}
25%{
top:-20px;
opacity: 0.5;
}
50%{
top:-25px;
opacity: 1;
}
75%{
top:-30px;
opacity: 0.5;
}
100% {
top:-35px;
opacity: 0;
}
}
上图我们加了图标变大动画，以及+1的效果动画，都是很简单的过渡动画，这里就不多说了。
之后我们只需要在点击之后增加这些样式类即可
$(this).html("<img src='http://www.wangdahai.cn/web_view/00104/zan.png' id='praise-img' class='animation' />");
praise_txt.addClass("hover");
text_box.show().html("<em class='add-animation'>+1</em>");
$(".add-animation").addClass("hover");
注意，上面我为什么是用html重新填充一边dom结构，而不是用addClass()来直接添加样式类
这个留给大家思考一下，不明白可以留言哦
附完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实例分析之网页点赞效果的实现</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
body{
margin:0;
padding:0;
}
/*动态点赞开始*/
.praise{
width:40px;
height:40px;
margin: 50px auto;
cursor: pointer;
font-size: 12px;
text-align:center;
position: relative;
}
#praise{
display:block;
width:40px;
height:40px;
margin:0 auto;
}
#praise-txt{
height:25px;
line-height:25px;
display: block;
}
.praise img{
width:40px;
height:40px;
display:block;
margin: 0 auto;
}
.praise img.animation{
animation: myfirst 0.5s;
}
#add-num{
display:none;
}
#add-num .add-animation{
color: #000;
position:absolute;
top:-15px;
left: 10px;
font-size: 15px;
opacity: 0;
animation: mypraise 0.5s ;
font-style:normal;
}
#add-num .add-animation.hover , #praise-txt.hover{
color: #EB4F38;
}
/*点赞图标放大动画*/
@keyframes myfirst
{
0%{
width:40px;
height:40px;
}
50%{
width:50px;
height:50px;
}
100% {
width:40px;
height:40px;
}
}
/*点赞数量加减动画*/
@keyframes mypraise
{
0%{
top:-15px;
opacity: 0;
}
25%{
top:-20px;
opacity: 0.5;
}
50%{
top:-25px;
opacity: 1;
}
75%{
top:-30px;
opacity: 0.5;
}
100% {
top:-35px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="praise">
<span id="praise"><img src="http://www.wangdahai.cn/web_view/00104/zan.png" id="praise-img"></span>
<span id="praise-txt">666</span>
<span id="add-num"><em>+1</em></span>
</div>
<script>
$(function() {
$("#praise").click(function() {
var text_box = $("#add-num");
var praise_txt = $("#praise-txt");
var num = parseInt(praise_txt.text());
$(this).html("<img src='http://www.wangdahai.cn/web_view/00104/zan.png' id='praise-img' class='animation' />");
praise_txt.addClass("hover");
text_box.show().html("<em class='add-animation'>+1</em>");
$(".add-animation").addClass("hover");
num += 1;
praise_txt.text(num)
});
})
</script>
</body>
</html>
本文由站长资源原创首发，转载请注明出处
评论前必须登录！
注册