JavaScript弹幕实现教程-优快云博客

本文详细介绍了如何使用JavaScript实现弹幕效果，包括弹幕样式设置、弹幕间隔时间和滑动速度调整，以及如何循环播放弹幕组数据。通过实例演示，帮助开发者轻松掌握JavaScript弹幕的开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>javascript弹幕</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style>
#play{
width:600px;
height:200px;
background-color:#000;
position:fixed;
top:500px;
}

#tangmu{
width:600px;
height:200px;
background-color:#fff;
z-index:9999;
background-color: rgba(000, 1, 000, 0.1);
position:fixed;
top:500px;
}

.tmf{
position:absolute;
font-size:24px;
color:#fff;
height:24px;
}
</style>

</head>

<body>
<input id="dc" type="text" />

<textarea id="dci"></textarea>
<div id="play">
<div id="tangmu">
<font class="tmf" id="t1" >檀木1</font>
<font class="tmf" id="t2">红米2</font>
<font class="tmf" id="t3" >大妈3</font>
<font class="tmf" id="t4" >檀木4</font>
<font class="tmf" id="t5">红米5</font>
<font class="tmf" id="t6" >大妈6</font>
<font class="tmf" id="t7" >檀木7</font>
<font class="tmf" id="t8">红米8</font>
<font class="tmf" id="t9" >大妈9</font>
<font class="tmf" id="t10" >檀木10</font>
<font class="tmf" id="t11">红米11</font>
<font class="tmf" id="t12" >大妈12</font>
<font class="tmf" id="t13" >檀木13</font>
<font class="tmf" id="t14">红米14</font>
<font class="tmf" id="t15" >大妈15</font>
<font class="tmf" id="t16" >檀木16</font>
<font class="tmf" id="t17">红米17</font>
<font class="tmf" id="t18" >大妈18</font>
<font class="tmf" id="t19" >檀木19</font>
<font class="tmf" id="t20">红米20</font>
<font class="tmf" id="t21" >大妈21</font>
<font class="tmf" id="t22" >檀木22</font>
<font class="tmf" id="t23">红米23</font>
<font class="tmf" id="t24" >大妈24</font>
<font class="tmf" id="t25" >檀木25</font>
<font class="tmf" id="t26">红米26</font>
<font class="tmf" id="t27" >大妈27</font>
</div>
</div>


<script src="js/jquery-1.7.2.min.js"></script>
<script>
var tmfz=(function(fjid,itemclass,hdjgtime,sdhd,pzise,isrb,callback){
var jgtime = 0;
var tangmuf = document.getElementById(fjid);
var pindex=1;
istop = 0;
var maxtime = 0;
//使用return 返回外部可调用的函数
return {
tm:function() {

tmstar();
}};

function tmstar() {

jgtime = 0;

var hdcd = $("." + itemclass).length;
$("#dc").val(hdcd + "*" + ((pindex - 1) * pzise) + "*" + (pzise * pindex));
for(var i=((pindex-1)*pzise);i<(pzise*pindex);i++)
{
if(i<hdcd)
{

tangmu($("." + itemclass).eq(i).attr("id"));
}
else
{ break;}
}

}


function tangmu(id) {

var mathHeight = Math.round(Math.random()*(tangmuf.offsetHeight))+"px";
var textLeft=tangmuf.offsetWidth+"px";
var textStyleObj = document.getElementById(id);

textStyleObj.style.marginLeft = textLeft;
if (Number(mathHeight.replace("px","")) > (tangmuf.offsetHeight - textStyleObj.offsetHeight)) {
mathHeight = (tangmuf.offsetHeight - textStyleObj.offsetHeight)+"px";
}
textStyleObj.style.marginTop = mathHeight;

var dhsj= ((tangmuf.offsetWidth+100)/sdhd);

setTimeout(function () {

if ($("#" + id).index() == $("." + itemclass).length - 1||$("#" + id).index()==(pzise*pindex)-1)
{
var kaitime = 0;
if (pzise >= $("." + itemclass).length) {
}
else {
kaitime = dhsj * 0.3;
setTimeout(function () {
if (istop == 0) {
if (isrb || (!isrb && $("#" + id).index() != $("." + itemclass).length - 1)) {
if ($("#" + id).index() == $("." + itemclass).length - 1)
{ pindex = 1; }
else
{ pindex++; }

tmstar();
}
}
}, kaitime);
}


$("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" },dhsj, function () {

if (typeof (callback) != "undefined" && $("#" + id).index() == $("." + itemclass).length - 1)
{ callback(); }

if (pzise >= $("." + itemclass).length) {
pindex = 1;
tmstar();
}

});

}
else
{ $("#" + id).animate({ "margin-left": "-" + textStyleObj.offsetWidth + "px" }, dhsj); }
}, jgtime);


jgtime = jgtime + hdjgtime;

}


});

// 夫级id;子集class;弹幕间隔时间;滑动速度,值越大越快;每次出现的弹幕个数;是否循环轮播此组数据; 此组所有弹幕完成后回调函数，当是否循环轮播为 false 时才会生效
tmfz("tangmu","tmf",500,0.1,10,true,function(){
//回调函数，最后一个触发
//强制停止
//istop=1;

}).tm();//传递参数

</script>

</body>
</html>