jquery积分提示效果插件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery积分提示效果</title>
<meta name="keywords" content="jquery特效,jquery提示效果,积分效果" />
<meta name="description" content="jquery积分提示效果" />

</head>
<body style=" padding:100px;">

<p>jquery积分提示效果,单击下面的按钮就可以看到提示效果,js随机数需要你使用的时候自己换成实际的值,这个值怎么获得,要根据你的实际需求了,比如ajax请求返回的数值等。</p>

<button class="tip">点击这里查看jquery积分提示效果</button>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$(".tip").on("click",function(e){
bonusPoints(e);
})
});

function bonusPoints(e){
var n=Math.round(Math.random()*10); //实际需求中要替换成实际的值 这里演示,用一个随机数
var $i=$("<b>").text("+"+n);
var x=e.pageX,y=e.pageY; //鼠标当前位置
$i.css({
top:y-20,left:x-10,
position:"absolute",color:"#E94F06","font-size":"1em"
});
$("body").append($i);
$i.animate({top:y-200,opacity:0,"font-size":"4em"},1500,function(){
$i.remove();
});
e.stopPropagation();
}
</script>

 

</body>
</html>

posted @ 2015-07-08 08:28  121686076  阅读(252)  评论(0编辑  收藏  举报