用jQuery写弹幕

咔咔库奇

已于 2024-06-13 19:26:13 修改

阅读量108

点赞数 3

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

于 2024-06-13 19:25:49 首次发布

本文链接：https://blog.csdn.net/m0_64455070/article/details/139662510

版权

前端基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            bottom: 0;
            background-color: #777777;
            height: 100px;
            width: 100%;
            font-size: 24px;
            line-height: 100px;
            text-align: center;
        }
        input{
            height: 30px;
            font-size: 24px;
        }
        button {
            height: 36px;
            font-size: 20px;
            border: transparent;
            background-color: red;
            color: white;
        }

        .content {
            width: 100%;
        }
        p {
            font-size: 30px;
            position: absolute;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="content">

    </div>
    <div class="box">
        吐槽：<input type="text" name="" id="">
        <button>发射</button>
    </div>
    <script src="./code.jquery.com_jquery-3.7.1.js"></script>
    <script>
        $('button').click(function () {
            // console.log($(this));
            if ($('.box input').val() != '') {
                let vall = $('.box input').val();
                let ps = $(`<p>${vall}</p>`);
                //添加
                ps.appendTo($('.content'));

                ps.css('top', parseInt(Math.random() * 400));
                ps.css('color', `rgb(${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)})`);
                ps.appendTo($('.content'));
                //动画
                ps.animate({ left: '-100%' }, 15000, 'linear', function () {
                });
            }
        $('.box input').val('');
        })
    </script>
</body>
</html>