你会制作点赞吗？(含动图)

像常见的QQ空间点赞、微信点赞、各种论坛和微博都会有点赞的功能，其实现也是比较容易。

用到的css处理知识如下：

jquary的$(‘tag’).append()
setInterval()定时器
css样式透明度opacity
定位position
字体大小、位置

旁边的数字点赞时加1，使用原生js实现。实现效果如下：

1.页面框架html部分实现

实现代码如下：

 <div class="big_box"><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div>
</div>

一个class为big_box的大盒子下面包含3个class为container的小盒子，这里每个小盒子中仅仅使用了p标签和一张图片，制作比较简易。

2.点击拇指按钮旁边数字加1实现

使用jquary实现了加法算法。遍历class为item的标签，获取到当前item下span标签后点击拇指，旁边数字加1，这样可以防止点击事件相互影响，例如点击下面拇指时会影响上面的计数。如：

//子元素太多，一个个绑定太麻烦，就绑定到他们的父亲上
$(".big_box").on("click", ".item", function(){//遍历大盒子big_box下面的所有item元素，然后找到item元素下面的span元素//$(this)就是当前事件的对象var num = ($(this).find("span")).html();/*获得span元素里面的值*/var nowNum = parseInt(num) + 1// console.log(nowNum);$(this).find("span").html(nowNum); /*将加1后的值写到span里面*/
} )

3.点击拇指+1向右上角移动实现

首先引入jquary.js框架
绑定事件
事件实现
- 设置+1的初始位置
  +1是斜着向右上角移动，它的位置是相对拇指的，因此这里需要设置position属性为absolute。如下：
- 设置定时器
  因为+1的大小和位置还有透明度都是逐渐变化的，所以需要设置定时器，这里设置每40ms变化一次，时间比较短暂，看起来像是连续的变化。
  向右上角移动的过程，字体每次增大10px，距离右侧和顶部的位置移动10px；透明度每次减少0.1，直到消失不见。每次+1的样式变化以后都要修改+1所在的变迁css的样式。如下：

4.完整代码

<!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>Document</title><style>/*.big_box {background: url(./img/bg.jpg) no-repeat center;}*/.big_box .container{height: 135px;border: 1px solid green;width: 800px;margin: 0 auto;}.big_box .item{position: relative;width: 30px;}p {margin-left: 20px;color: blue;font-weight: 600;}.item img {width: 60px;height: 35px;margin-top: 8px;margin-left: 20px;}.item span {margin-top: -41px;margin-left: 48px;display: flex;}</style>
</head>
<body>
<div class="big_box"><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div><div class="container"><p>风急天高猿啸哀，渚清沙白鸟飞回。无边落木萧萧下，不尽长江滚滚来</p><p>万里悲秋常作客，百年多病独登台。艰难苦恨繁霜鬓，潦倒新停浊酒杯</p><div class="item"><img src="img/timg.jpg"><span>0</span></div></div>
</div><script src="js/jquery-3.3.1.js"></script><script>$('.item').click(function () {AddFavor(this);});$(".big_box").on("click", ".item", function(){//遍历大盒子big_box下面的所有item元素，然后找到item元素下面的span元素//$(this)就是当前事件的对象var num = ($(this).find("span")).html();/*获得span元素里面的值*/var nowNum = parseInt(num) + 1// console.log(nowNum);$(this).find("span").html(nowNum); /*将加1后的值写到span里面*/} )//点赞函数function AddFavor(self) {// DOM对象,设置+1的字体、位置和透明度var fontSize = 15;var top = 0;var right = 0;var opacity = 1;var tag = document.createElement('span');$(tag).text('+1');$(tag).css('color','green');$(tag).css('position','absolute');$(tag).css('fontSize',fontSize + "px");$(tag).css('right',right + "px");$(tag).css('top',top + 'px');$(tag).css('opacity',opacity);$(self).append(tag);var obj = setInterval(function () {//字体逐渐增大fontSize = fontSize + 10;//向右上角移动，距离顶部位置和右侧均每次减少10pxtop = top - 10;right = right - 10;//透明度一次减少0.1opacity = opacity - 0.1;//随时间变化修改+1标签的css样式$(tag).css('fontSize',fontSize + "px");$(tag).css('right',right + "px");$(tag).css('top',top + 'px');$(tag).css('opacity',opacity);if(opacity < 0){clearInterval(obj);$(tag).remove();}}, 40);}</script>
</body>
</html>

本项目源码：点赞项目源码

521快乐，每天进步一点点、充实一点点、加油！！！

你会制作点赞吗？(含动图)相关推荐

python 制作gif-怎样用Python制作好玩的GIF动图
原标题:怎样用Python制作好玩的GIF动图作者: 景略集智 https://jizhi.im/blog/post/pytogif 程序员共读整理发布,转载请联系作者获得授权之前我们分享过用Py ...
python 制作gif-利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
怎么制作高清GIF动图
想要制作一个高清的GIF动态图片其实也并不是很难,大家都知道所谓GIF动图就是很多帧连在一起无限循环播放,永不停歇,可以用来当做QQ表情图.微信表情图以及搞笑图片.只要在电脑上用到一个能够将多张图片或 ...
python制作gif动图_怎样用Python制作好玩的GIF动图
原标题:怎样用Python制作好玩的GIF动图作者: 景略集智 https://jizhi.im/blog/post/pytogif 程序员共读整理发布,转载请联系作者获得授权之前我们分享过用Py ...
制作gif动图python_利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
python画动图-利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
pythongif字符动图,利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
python画动态图-利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
python制作渐变的gif动图（简单版本）
1.git动图制作 python制作gif动图可以用imageio库简单实现. 做gif实际上就是变换连续几张图,以下是一个简单的例子. 效果图: 图片1 图片2 图片3 具体的代码实现: impor ...
如何制作精美的GIF动图
其实鸽了这么长时间,本来就是想等着比赛结束之后一起总结,无奈今天突发状况,不小心把之前用的动图代码删了,就因为它我英语课都差点逃了,好在最终弄出来了,也算有失有得吧,本人也顿起倾诉欲望,写了这篇文章 ...