<!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>