| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1783 人关注过本帖
标题:我是个菜鸟,练习弹幕发射动画,不知道哪错了帮忙看一下
只看楼主 加入收藏
β博士
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2017-4-9
结帖率:0
收藏
已结贴  问题点数: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 
2018-01-10 19:33
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
收藏
得分: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>
2018-01-11 13:05
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
收藏
得分: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')
加個屬性


2018-01-11 13:08
快速回复:我是个菜鸟,练习弹幕发射动画,不知道哪错了帮忙看一下
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017361 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved