JavaScript弹幕实现

2015/08/21 57100
<!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>
代码片段
