使用animate完成弹幕消息发送,要求每个div消息从右边往左边移动最后消息
时间: 2023-07-11 16:17:55 浏览: 77
首先,在HTML中,我们需要为每个弹幕消息添加一个class,例如"danmu",并且给每个弹幕消息添加一个data属性,用来记录消息是否已经被发送。
```
<div class="danmu" data-sent="false">
<p>这是一条弹幕消息</p>
</div>
```
接下来,在JavaScript中,我们可以使用jQuery的animate方法来实现弹幕消息的移动。我们需要先获取所有未发送的弹幕消息,然后按照顺序依次移动它们的位置。最后,我们需要将已发送的弹幕消息的data-sent属性设置为true,这样它们不会再次被移动。
下面是实现的代码:
```
$(document).ready(function(){
var danmus = $('.danmu[data-sent="false"]');
var delay = 0;
var height = $(window).height() - $('.danmu').height(); // 弹幕在窗口内的高度范围
danmus.each(function(){
var danmu = $(this);
var width = danmu.width() + $(window).width(); // 弹幕从右边开始移动
var top = Math.floor(Math.random() * height); // 弹幕在高度范围内随机位置
danmu.css({
left: width,
top: top
});
danmu.animate({
left: -danmu.width() // 弹幕移动到左边界
}, 10000, function(){
danmu.remove();
});
delay += 2000;
danmu.delay(delay);
});
});
```
这段代码会将所有未发送的弹幕消息从右边移动到左边,并且每个弹幕消息之间会有2000ms的延迟。弹幕消息的高度位置是在窗口内随机的,弹幕的移动速度为10秒,移动完成后将被删除。你可以根据需要调整这些参数。
阅读全文