jquery动画增加积分效果 | rin部落-web前端开发-主流web技术分享博客

jquery动画增加积分效果

效果图：

html代码：

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

    <script  src="./jquery-1.7.2.min.js"></script>
    </head>
    <body>
<div class="tip">
    点击页面任意位置查看效果
        </div>
    </body>
</html>
        <style>html,body{
    background:#fff;font-size:14px;font-family:"microsoft yahei";
}
.tip{
text-align:center;
    padding-top:10%;
    font-size:2em;
}</style>
                <script>$("html,body").on("click",function(e){
anp(e);
})

function anp(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,
position:"absolute",color:"#E94F06"
});
$("body").append($i);
    $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
$i.remove();
});
    e.stopPropagation();
}</script>

2014-06-17