<!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>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/8750.html