jquery实现点赞功能

来源：动视网责编：小OO 时间：2020-11-27 20:06:35

jquery实现点赞功能

要实现的点赞功能比较简单，就是实现点击按钮，有心向上飘，一直飘出屏幕外。首先只需要在body中定义一个button。和盛放心的盒子。<；p id = "；demo"；>；<；/p>；<；input type = "；button"；id = "；btn1"；value = "；点个赞吧"；/>；。由于还要引进心的图片，所以在这里在设置css样式的时候还要设置图片img的样式。css代码如下：

推荐度：

点击下载本文 文档为doc格式

导读要实现的点赞功能比较简单，就是实现点击按钮，有心向上飘，一直飘出屏幕外。首先只需要在body中定义一个button。和盛放心的盒子。<；p id = "；demo"；>；<；/p>；<；input type = "；button"；id = "；btn1"；value = "；点个赞吧"；/>；。由于还要引进心的图片，所以在这里在设置css样式的时候还要设置图片img的样式。css代码如下：

点赞已经流行多年，点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，欢迎大家点赞。

要实现的点赞功能比较简单，就是实现点击按钮，有心向上飘，一直飘出屏幕外。

首先只需要在body中定义一个button。和盛放心的盒子

<p id = "demo"></p>
<input type = "button" id = "btn1" value = "点个赞吧" />

由于还要引进心的图片，所以在这里我们在设置css样式的时候还要设置图片img的样式。
css代码如下：

 <style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }

 #btn1{
 position: absolute;
 bottom:100px;
 width: 200px;
 background-color: lightblue;
 font-size: 18px;
 left:45%;
 }
 img{
 bottom:100px;
 margin-left: -15px;
 width: 20px;
 height:20px;
 position: absolute;
 left: 50%;
 }
 </style>

下来就是要写jquery函数。

效果图如下：