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

楼主

已结贴√ 问题点数：20 回复次数：2

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

程序代码：

<!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.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)
            //创建一个新标签
            $("<span></span>").text($("#inp").val())
                .css("color",color[size])
                .css("left","1500px")
                .css("top",DMAD)
                .animate({left:-100},10000,function () {
                    $(this).remove()
                });

        }).appendTo($("#div1"))
    })
</script>
</body>
</html>
找了很久实在找不出来，帮帮忙

搜索更多相关主题的帖子: html　color　left　div　script　

第 2 楼

得分:20

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

第 3 楼

得分:0

1.
var color = ["FF2EA3","4FFFFD","FFC6C3","333EFF","36FF39","2B94FF","FFE019"]
var color = ["#FF2EA3","#4FFFFD","#FFC6C3","#333EFF","#36FF39","#2B94FF","#FFE019"]

2.
.css("top",DMAD)
.css("top",DMAD+"px")

3.
.appendTo($("#div1"))
$("#div1").append(el);

4.
.css("position",'absolute')
加個屬性