jQuery弹幕效果

最新推荐文章于 2022-11-21 23:05:44 发布

小李学软件

最新推荐文章于 2022-11-21 23:05:44 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： js基础编文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/lzDevastator/article/details/104804459

js基础编专栏收录该内容

24 篇文章

订阅专栏

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
    </style>
</head>

<body>

    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>
        $(function () {
            var color = ["#ff0", "#00f", "#f00", "#0ff", "yellogreen"]
            $("#btn").click(function () {
                var randomColor = parseInt(Math.random() * color.length);
                var randomY = parseInt(Math.random() * 400);
                $("<span></span>")
                    .text($("#text").val())
                    .css({
                        color: color[randomColor],
                        left: "2000px",
                        top: randomY
                    }).animate({ left: -500 }, 10000, function () { $(this).remove() })
                    .appendTo("#boxDom");
                $("#text").val("")
            })
            $("#text").keyup(function(e){
                if(e.keyCode == 13){
                    $("#btn").click();
                }
            })
        })
    </script>
</body>

</html>