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完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
python文件比较示例分享
2014/01/10 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python能做什么 python的含义
2019/10/12 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python基于property()函数定义属性
2020/01/22 Python
python打开文件的方式有哪些
2020/06/29 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
群众路线教育实践活动方案
2014/02/02 职场文书
法律顾问服务方案
2014/05/15 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
初中毕业生感言
2015/07/31 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
详解NodeJS模块化
2021/06/15 NodeJs