站长资源
全栈工程师站点

实例分析之网页点赞效果的实现

实例分析之网页点赞效果的实现 -1

点赞如今在网络上可以说是随处可见,怎么和粉丝互动,那可不就是刷屏,关注,点赞吗。

今天我们就来看看如何实现这个点赞小功能

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)

添加完以上代码,我们来看下效果

实例分析之网页点赞效果的实现 -2

功能是有了,但是怎么看也不像是点赞,~~~~(>_<)~~~~,有点呆若木鸡的感觉

其实功能部分我们已经写完了,就是这么简单,需要让他动起来,那就加点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>

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 实例分析之网页点赞效果的实现

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 实例分析之网页点赞效果的实现

评论 抢沙发

评论前必须登录!