jquery点赞功能实现代码 点个赞吧!


Posted in jQuery onMay 29, 2020

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

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

<div id = "demo"></div>
<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函数。

(document).ready(function(){ 
// 1. 首先给按钮绑定点击事件。(“#btn1”).click(function(){ 
//2. 生成彩色的心,即随机选择图片。 
// 2.1 生成随机数 
var num = Math.floor(Math.random() * 3 +1); 
//2.2 生成一个img元素,并为其添加src属性 
var image = $(“”);

//三个图片的名字分别是 1.png\2.png\3.png,所以img的路径和图片名可以进行线面的字符串拼接 
image.attr(“src”,”./images/”+num+”.png”);

//3。将生成的img追加到页面上

$(“#demo”).append(image);

//4. 下来就是让心动起来。从点击按钮的地方向上飘。利用jquery的动画函数animate()

//生成随机的距离左边的距离,这样就可以使心有种向上飘的感觉 
var left = Math.random() * 800;

image.animate({ 
‘bottom':'800px', 
‘left':left, 
‘opacity':'0' 
},3000); 
});

}); 
});

效果图如下:

jquery点赞功能实现代码 点个赞吧!

jquery点赞功能实现代码 点个赞吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
You might like
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
python 写一个水果忍者游戏
2021/01/13 Python
python实现图片转字符画的完整代码
2021/02/21 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
2014年社区个人工作总结
2014/12/02 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书