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

2019-11-19 14:01:46

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

上一篇：JavaScript实现简单的文本逐字打印效果示例

下一篇：Koa项目搭建过程详细记录