天马行空工作室

 找回密码
 加入天马
搜索
查看: 2622|回复: 0

各种角度的弹幕演示

[复制链接]
发表于 2014-8-15 21:02:01 | 显示全部楼层 |阅读模式
演示地址:http://tmxk.org/c/fly/
程序思路:
将要弹幕的内容设置成绝对定位,然后定时,根据预设的方向增加或减少top和left,最后的top和left都是时间速度乘积于边界的模值,这样的效果就是从一边出去后另一边继续显示。
程序截图:


主程序:
  1. myfly=function(a){
  2.         this.speed=a.speed || [20,50,10,30];
  3.         this.direction=a.direction || 0;
  4.         this.content=a.content || [1,0,10,[]];
  5.         this.styles=a.styles || ["#333","#800","#880",0,0];
  6.         this.xy=a.xy || [0,0,window.screen.width,window.screen.height];
  7.         mtimer=null;
  8.         var s="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
  9.         c=[],ss=[],speedx=[],speedy=[],color1=[],color2=[],color3=this.styles[0],tt=0,pwidth=this.xy[2],pheight=this.xy[3],tx=this.xy[1],ty=this.xy[0],dris=[[1,0],[1,-1],[0,1],[1,1],[0,-1],[-1,-1],[-1,0],[-1,1]],mydri=dris[this.direction],px=[],py=[];
  10.         (this.content[1] && this.content[3])?(length=this.content[3].length,c=this.content[3]):(length=this.content[2]);

  11.         this.init=function(){
  12.         if ($("#fly")) $("#fly").remove();this.stop();
  13.         $("body").append("<div style='position:fixed;overflow: hidden;width:"+pwidth+"px;height:"+pheight+"px;top:"+tx+"px;left:"+ty+"px;background-color:"+this.styles[0]+";z-index:999998;opacity:.8' id='fly'></div>");
  14.         for(var i=0;i<length;i++)
  15.         {
  16.                 if (this.content[0])
  17.                         {t="";n=Math.floor(Math.random()*50)+1;for(var j=0;j<n;j++) t+=s[Math.floor(Math.random()*62)];c.push(t)}
  18.                 speedx.push(Math.floor(Math.random()*this.speed[0])+this.speed[1]);
  19.                 speedy.push(Math.floor(Math.random()*this.speed[2])+this.speed[3]);
  20.                 if(this.styles[3])
  21.                         color1.push("rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")");
  22.                 else color1.push(this.styles[1]);
  23.                 if(this.styles[4])
  24.                         color2.push("rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")");
  25.                 else color2.push(this.styles[2]);
  26.                 px[i]=(mydri[0]==0)?i*pwidth/(length+1):(mydri[0]==1)?0:pwidth;
  27.                 py[i]=(mydri[1]==0)?i*pheight/(length+1):(mydri[1]==1)?0:pheight;
  28.                 ss.push("<div style='position:absolute;display:none;overflow: hidden;line-height:"+pheight/length+"px;color:"+color1[i]+";'><span style='border: 2px solid "+color2[i]+"'>"+c[i]+"</span></div>");
  29.         }
  30.         $("#fly").html(ss.join(""));
  31.         }
  32.         this.start=function(){
  33.                 mtimer=setInterval(function(){tt++;for(var i=0;i<length;i++) $("#fly>div:eq("+i+")").css({"left":(px[i]+tt*mydri[0]*speedx[i]%pwidth+"px"),"top":(py[i]+tt*mydri[1]*speedy[i]%pheight+"px"),"display":"block"});nn.push(tt)},100);
  34.         }
  35.         this.stop=function(){window.clearInterval(mtimer)}
  36.         this.reload=function(){
  37.                 tt=0;this.stop();this.start();
  38.         }
  39.         this.full=function(){
  40.                 pwidth=window.screen.width;
  41.                 pheight=window.screen.height;
  42.                 tx=ty=0;
  43.                 this.init();
  44.                 this.start();       
  45.         }       
  46.         this.init();
  47.         this.start();
  48.        
  49. };
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入天马

x
您需要登录后才可以回帖 登录 | 加入天马

本版积分规则

Archiver|手机版|小黑屋|天马行空工作室 ( 京ICP备12003429号  

GMT+8, 2019-3-23 04:15 , Processed in 0.295120 second(s), 21 queries .

Powered by Discuz! v8

© 2010-2014 各种角度的弹幕演示 - 网络服务 天马行空工作室

快速回复 返回顶部 返回列表