jQuery实现了鼠标点击心形浮动的酷炫效果

本文介绍了jQuery的酷炫效果，实现了鼠标点击时的心形浮动。分享给大家参考，如下：

点击鼠标一次，鼠标顶部会显示一个爱心，慢慢向上消失，如下图所示：

很酷吧？直接发布代码：

！doctype html heartheta charset=' utf-8 ' title test/title script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script style type=' text/CSS ' * { margin 3360 px；padding: 0px}/style script type=' text/JavaScript ' $(function(){ var height=$(window))。宽度()；$('#test ')。css({ 'height':height，})；var n=1；$ ('# test ')。单击(函数(e) {if (n% 2==0) {var $ I=$(' ')。文本('您单击了一次')；//偶数表示这个}else{ var $i=$(' ')。文本(“”)；//以单数形式显示此{ n };var x=e.pageX，y=e.pageY//获取鼠标点击$ i.css的位置坐标({'z-index' :999，' top' :y-20，' left' :x，' position' 3360' absolute '，' color' :' red '，' font) $('body ')。追加($ I)；$i.animate({ 'top': y - 180，'不透明度' : 0 }，1500，function(){ $ I . remove()；});//设置动画})；});/script/head dydiv id=' test '/div/body/html更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》和《jQuery动画与特效用法总结》。

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