jQuery写发送弹幕效果

最新推荐文章于 2022-09-22 16:45:50 发布

杨-Yuki

最新推荐文章于 2022-09-22 16:45:50 发布

阅读量368

点赞数 1

分类专栏： jQ

本文链接：https://blog.csdn.net/Orange_Sheep/article/details/107779009

版权

jQ 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

要求：在输入框输入弹幕内容，点击发送，随机字体大小，随机颜色，随机位置，在显示区生成弹幕。

所需技术：jquery

<!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>
        .show {
            width: 800px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        
        .send {
            text-align: center;
            width: 800px;
            margin: auto;
        }
        /* .text {
            position: absolute;
        } */
        
        .send input {
            width: 400px;
            height: 40px;
        }
        
        .send button {
            width: 80px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="show">

    </div>
    <div class="send">
        <input type="text">
        <button>发送</button>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
            // 获取展示的盒子宽高
            var h = parseInt($(".show").height());
            var w = $(".show").width();
            $("button").click(function() {
                //接收返回的对象
                var obj = random();
                var inner = $("input").val();
                // console.log(inner);
                $("<span></span>").appendTo(".show");
                $("span").text(inner).css({
                        'color': obj.bg,
                        'font-size': obj.size,
                        'position': 'absolute',
                        'top': obj.top + "px",
                        'right': -200

                    }).animate({
                        'right': 20000
                    }, 30000, 'linear', function() {
                        $(this).remove();
                    })
                    // 清空input里的值
                $("input").val("");
            })

            //添加一个键盘事件
            // $('[type ="text"]').keyup(function(event) {
            //     if (event.keyCode == 13) {
            //         $('button').click();
            //     }
            // })

            function random() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var a = Math.random();
                // 随机颜色
                var bg = `rgb(${r},${g},${b},${a})`;
                //字体最小20  最大39
                var size = Math.floor(Math.random() * 20 + 20);
                // 随机高度
                var top = Math.floor(Math.random() * h);
                var obj = {
                    bg: bg,
                    top: top,
                    size: size
                }
                return obj;
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

杨-Yuki

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery写发送弹幕效果

要求：在输入框输入弹幕内容，点击发送，随机字体大小，随机颜色，随机位置，在显示区生成弹幕。所需技术：jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
复制链接

扫一扫

专栏目录