jquery鼠标点击空白页面闪出爱心图标特效
用jquery实现点击空白页面显示爱心图标,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> $(function(){ var txt="<span class='txt'></span>; $('body').append(txt); var txted=$(".txt"); txted.css({position:"absolute",color:"red"}); var Animated=function(x){ x.stop().animate({top:"-=80px",opacity:'1'},500,function(){$(this).animate({opacity:"0"},500);});}; $(document).on("click",function(e){ var attr=["☺","☯","♥","♬"]; var mathText=attr[Math.floor(Math.random()*attr.length)]; var x=e.pageX-32+"px"; var y=e.pageY-18+"px"; txted,text(mathText); txted.css({"left":x,"top":y}); Animated(txted); }); }); </script> |
效果看本站