JavaScript弹幕实现

原创
用户1503405
修改于 2021-09-24 10:21:07
2.3K0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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> </pre>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
javascript
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
javascript
登录后参与评论
0 条评论
热度
JavaScript弹幕实现

JavaScript弹幕实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
