jQuery实现鼠标点击处心形漂浮的炫酷效果示例


Posted in jQuery onApril 12, 2018

本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果。分享给大家供大家参考,具体如下:

鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图:

jQuery实现鼠标点击处心形漂浮的炫酷效果示例

是不是很炫酷,直接贴代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
  margin: 0px;
  padding: 0px;
}
</style>
<script type="text/javascript">
$(function(){
  var height=$(window).width();
  $('#test').css({
    'height':height,
  });
  var n=1;
  $('#test').click(function(e){
    if(n%2==0){
      var $i=$('<b></b>').text('你点击了一下');//双数显示这个
    }else{
      var $i=$('<b></b>').text('❤');//单数显示这个
    }
    n++;
    var x=e.pageX,y=e.pageY;//获取鼠标点击的位置坐标
    $i.css({
        "z-index": 9999,
        "top": y - 20,
        "left": x,
        "position": "absolute",
        "color": 'red',
        "font-size": 14,
      });
      $("body").append($i);
      $i.animate({
        "top": y - 180,
        "opacity": 0
      }, 1500, function() {
        $i.remove();
      });//设置动画
  });
});
</script>
</head>
<body>
<div id="test">
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 #jQuery
jQuery中复合选择器简单用法示例
Mar 31 #jQuery
jQuery中内容过滤器简单用法示例
Mar 31 #jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
You might like
php获取域名的google收录示例
2014/03/24 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python数据类型强制转换实例详解
2020/06/22 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
小班开学寄语
2014/04/04 职场文书
一年级评语大全
2014/04/23 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
论语读书笔记
2015/06/26 职场文书