点赞如今在网络上可以说是随处可见,怎么和粉丝互动,那可不就是刷屏,关注,点赞吗。
今天我们就来看看如何实现这个点赞小功能
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>
本文由站长资源原创首发,转载请注明出处
评论前必须登录!
注册