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中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery append与appendTo方法比较
May 24 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery属性选择器用法实例分析
Jun 28 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Django 开发环境配置过程详解
2019/07/18 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书
公司办公室岗位职责
2014/03/19 职场文书
工作失职检讨书500字
2014/10/17 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript