首页 > 我只能让弹幕弹出在同一个位置,要怎么改进?让弹幕分行出现

我只能让弹幕弹出在同一个位置,要怎么改进?让弹幕分行出现

<div class="danmu">
        
        <div class="screen">
            
        </div>
        <div class="operate">
            <input type="text" name="input" placeholder="说点什么" />
            <p>
            <button class="act">发射</button>
            <button>清屏</button>
            </p>
        </div>
    </div>

$(".act").click(function(){
            var input = $(":input").val();
            var danmu = $("<p class = 'actDanmu'>" + input + "<\/p>");
            $(".screen").append(danmu);
            $(danmu).css({
                
                "right":"25px"
            });
            $(":input").val("");
        })
*{
    padding: 0;
    margin: 0;
}
.screen{
    width: 1300px;
    height: 380px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    
    margin: 25px auto;
}
.operate input{
    display: block;
    margin: 0 auto;
    padding-left: 10px;

    width: 400px;
    height: 35px;
    
    border-radius: 3px;
    border: 1px solid #cccccc;
}
.operate p{
    text-align: center;

}
.operate p button{
    background-color: #fff;
    color: #b0a8a5;
    letter-spacing: 4px;

    width: 160px;
    height: 35px;
    margin-top: 25px;

    border: 1px solid #b0a8a5;
    border-radius: 3px;
}
.operate p button:first-child{
    border-color: red;
    color: red;
}
.actDanmu{
            position:absolute;
}

1.假设弹幕是全屏模式,那么可以确认每条弹幕元素的 top0window.innerHeight 之间。

2.屏幕总高度除以每条弹幕元素高度,可得出一屏之内能容纳多少行弹幕。如果需要弹幕之间有间距,除的时候记得加上边距。

3.假设已得出屏幕可容纳 10 条弹幕,那么每条弹幕出现的位置可以取 1-10 内随机数乘以弹幕元素高度,得出这条弹幕出现时的 top


可以设置 top 和right的值是随机数

【热门文章】
【热门文章】