我是个菜鸟，练习弹幕发射动画，不知道哪错了帮忙看一下 - 编程论坛

cho12018-01-11 13:05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: cornsilk;
        }
        #inp{
            width: 500px;
            height: 35px;
            margin-top: 550px;
            margin-left: 450px;
            float: left;
        }
        #but{
            width: 50px;
            height: 40px;
            background-color: red;
            color: #47f594;
            margin-top: 550px;
            font-weight: bold;
            float:left;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div>
            <div id="div2">
                <input id="inp"/>
                <button id="but">发送</button>
            </div>
        </div>
    </div>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
    $(function () {
        $("#but").click(function () {
            //创建一个数组，规定弹幕的颜色
            var color = ["#FF2EA3","#4FFFFD","#FFC6C3","#333EFF","#36FF39","#2B94FF","#FFE019"]
            //选择一个随机的颜色
            var size =parseInt(Math.random()*7)
            //创建一个随机的弹幕高度
            var DMAD = parseInt(Math.random()*400)
            //创建一个新标签


            var el = $("<span></span>")
                .text($("#inp").val())
                .css("color",color[size])
                .css("position",'absolute')
                .css("left","1500px")
                .css("top",DMAD+"px")
                .animate({left:"-100px"},10000,function () {
                    $(this).remove()
                });

            $("#div1").append(el);
        })
    })
</script>
</body>
</html>