jQuery弹幕效果

jQuery弹幕效果

弹幕在日常网络中也比较常见，弹幕的种类也是各式各样的，今天也就简单的做一个普通的弹幕效果。

弹幕效果图

上方框中出现发送的弹幕，下方输入要发送的文字，点击发送或按回车键发送。

代码

先构建出基本样式

<style>
        .div {
   
            width: 1500px;
            height: 800px;
            border: solid 1px red;
            margin: auto;
            position: relative;
        }
        
        .txt {
   
            width: 220px;
            margin: auto;
            padding: 30px;
        }
        
        marquee {
   
            font-size: 25px;
            font-weight: bold;
            color: rebeccapurple;
            position: absolute;
        }
    </style>
    <div class="div">
        <marquee behavior="" direction="">下方输入，点击发送</marquee>
    </div>
    <div class="txt">
        <input type="text" class="text"><button class="fs">发送</button>
    </div>

引用jQuery，并添加事件

$('.fs').click(function() {
   
            var x =