html鼠标悬停点击,jQuery实现鼠标点击悬浮特效

这次给大家带来jQuery实现鼠标点击悬浮特效，jQuery实现鼠标点击悬浮特效的注意事项有哪些，下面就是实战案例，一起来看一下。

鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图：

是不是很炫酷,直接贴代码:

测试

*{

margin: 0px;

padding: 0px;

}

$(function(){

var height=$(window).width();

$('#test').css({

'height':height,

});

var n=1;

$('#test').click(function(e){

if(n%2==0){

var $i=$('').text('你点击了一下');//双数显示这个

}else{

var $i=$('').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();

});//设置动画

});

});

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

vuex里mapState,mapGetters使用详解

vuex使用步骤详解(附代码)