简单的弹幕方法实现

最新推荐文章于 2024-09-13 21:40:18 发布

星空下的嗳

最新推荐文章于 2024-09-13 21:40:18 发布

阅读量5.6k

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_35718410/article/details/52061274

版权

本文介绍了一个在直播平台项目中实现的简单弹幕功能。通过JavaScript，每条弹幕从右向左随机速度移动，文字颜色和位置均随机。首先在HTML创建弹幕容器，然后在JS文件定义弹幕方法，解决了弹幕元素换行的问题，实现了预期效果。

摘要由CSDN通过智能技术生成

由于在做一个直播平台项目，要给我们的项目加上一个弹幕功能，在网上也找到了可以直接用的插件，但毕竟不是自己写的，还是想自己来实现一个简单的弹幕方法，下面来介绍一下我的弹幕，超简单的喔！

1、实现的效果大概是这样，每发送一条弹幕，会从容器的右边向左边移动，移动速度在一定范围内随机，文字的颜色随机，弹幕的位置在弹幕容器内随机。

2、首先在HTML里定义一个现实弹幕的容器，id为danmu。

3、在js文件中，定义一个弹幕方法，具体代码如下

function danmu(text){
  
    var $p=$('<p>'+text+'</p>');           //创建一个p元素，弹幕的文字加在p元素上
    var x=0;
    var h=Math.random()*(parseInt($('#danmu').css('height'))-24);
    var num=Math.random()*1.5;             //num用于控制弹幕速度为随机
    //控制颜色随机
    var r=parseInt(Math.random()*(255+1));
    var g=parseInt(Math.random