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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jQuery实现手风琴特效
Jan 11 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
表格展示无限级分类(PHP版)
2012/08/21 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Python sys.argv用法实例
2015/05/28 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python3.4爬虫demo
2019/01/22 Python
python制作图片缩略图
2019/04/30 Python
django-filter和普通查询的例子
2019/08/12 Python
python文件及目录操作代码汇总
2020/07/08 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
结婚典礼证婚词
2014/01/08 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
保安公司服务承诺书
2014/05/28 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
小学运动会报道稿
2014/10/04 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
追讨欠款律师函
2015/05/27 职场文书
集结号观后感
2015/06/08 职场文书
python爬虫--selenium模块
2021/03/31 Python
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL