jquery 游戏得分冒泡效果_游戏得分效果-优快云博客

本文链接：https://blog.youkuaiyun.com/felixfeng/article/details/6927163

本文展示了一个使用jQuery实现的fadeTo动画效果，通过点击链接显示和隐藏带有不同分数提示的浮动面板，并在动画结束后移除面板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animation - fadeTo </title>
    <script type="text/javascript" src="/content/js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function (e) {
            $("a.tip").click(function (e) {
                ShowTip(e, $(this).attr("tip"));
            });

        });

        function ShowTip(e, score) {
            var left = e.pageX;
            var top = e.pageY - 30;
            var id = "divPop" + left + "_" + top;
            var $tip = $('<div id="' + id + '" style="display: none; position: absolute;">' + score + '</div>');
            var color;
            if (score.substring(0, 1) == "+") {
                color = "Green";
            }
            else {
                color = "Red";
            }

            $('body').append($tip);
            $('#' + id).attr("style", "top:" + top + "px" + ";left:" + left + "px" + ";position: absolute;font-weight: bold; color:" + color + ";");
            $('#' + id).show();
            $('#' + id).animate({ "opacity": "hide", "top": top - 30 }, 1500, function () { $(this).remove(); });
        } 
    </script>
</head>
<body>
    <div style="top: 200px; position: absolute;">
        <a href="javascript:void(0)" class="tip" tip="+60">点击我1</a> <a href="javascript:void(0)"
            class="tip" tip="+120">点击我2</a> <a href="javascript:void(0)" class="tip" tip="-100">
                点击我3</a>
    </div>
</body>
</html>