<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.假设弹幕是全屏模式,那么可以确认每条弹幕元素的 top
在 0
到 window.innerHeight
之间。
2.屏幕总高度除以每条弹幕元素高度,可得出一屏之内能容纳多少行弹幕。如果需要弹幕之间有间距,除的时候记得加上边距。
3.假设已得出屏幕可容纳 10 条弹幕,那么每条弹幕出现的位置可以取 1-10 内随机数乘以弹幕元素高度,得出这条弹幕出现时的 top
。
可以设置 top 和right的值是随机数