JavaScript彈幕實現

jopen 9年前發布 | 8K 次閱讀 JavaScript 

<!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>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！