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遮罩层实例讲解
May 11 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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操作数组相关函数
2011/02/03 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php 中英文语言转换类
2011/09/07 PHP
Admin generator, filters and I18n
2011/10/06 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
js下弹出窗口的变通
2007/04/18 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python datetime中strptime用法详解
2019/08/29 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
蔬菜基地的创业计划书
2014/01/06 职场文书
户籍证明的格式
2014/01/13 职场文书
会计学生自我鉴定
2014/02/06 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
房产分割协议书范文
2014/11/21 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang