实用JQ实现简单的屏幕的弹幕效果「style type=“text/css“」 html, body { margin: 0px；

最新推荐文章于 2022-06-25 22:46:38 发布

yumch.

最新推荐文章于 2022-06-25 22:46:38 发布

阅读量2.5k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_36264753/article/details/107240156

版权

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

<script src="../min.js"></script>
<script>
    var colors = [
        "red",
        "green",
        "hotpink",
        "pink",
        "cyan",
        "yellowgreen",
        "purple",
        "deepskyblue",
    ];
    $(function () {
        var $btn = $("button");
        var $txt = $(".text")

        $btn.on("click", function () {
            var txt = $txt.val().trim();
            $txt.val("");
            if (txt.length == 0) {
                return;
            }
            $newspan = $("<span></span>")
            $newspan.text(txt);
            $(".boxDom").append($newspan);

            var idx = parseInt(Math.random() * colors.length);
            var randomtop = parseInt(Math.random() * $(window).height() / 2);

            $newspan.css({
                color: colors[idx],
                top: randomtop,
                left: $(window).width()
            })

            $newspan.animate({
                left: -$(window).width(),
            }, 8000, "linear", function () {
                $newspan.remove();
            })
        })
    })
</script>

</html>