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 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php printf输出格式使用说明
2010/12/05 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
招聘与培训专员岗位职责
2014/01/30 职场文书
面试后的英文感谢信
2014/02/01 职场文书
品牌宣传方案
2014/03/21 职场文书
文体活动总结范文
2014/05/05 职场文书
村容村貌整治方案
2014/05/21 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
新党员入党决心书
2015/09/22 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
MySQL infobright的安装步骤
2021/04/07 MySQL