你的位置:首页 > Java教程

[Java教程]jQuery+css3 弹幕


写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器

html部分

自己设置样式,定义#danmu 的长宽,区域等

 

<div id="danmu"></div>

js引用

$("#danmu").danmu({  minSpeed : 3000,  maxSpeed: 5000,  _text : [//不设置color和fontSize时会从默认值里面随机挑选    {"text":"11111","color":"#000","fontSize":"14px"},    {"text":"222","color":"#ff4141","fontSize":"14px"},    {"text":"333","color":"#60c7d0","fontSize":"16px"},    {"text":"44","color":"#ff8201","fontSize":"14px"},    {"text":"5555","color":"#10ad54","fontSize":"18px"},    {"text":"666","color":"#2c8ac0","fontSize":"20px"}//    {"text":"11111"},//    {"text":"222"},//    {"text":"333"},//    {"text":"44"},//    {"text":"5555"},//    {"text":"666"}  ]})

可设置实时发送弹幕,不会跟初始化冲突,你需要做的就是拼数组给danmu

$("#danmuBtn").click(function(){//发布信息触发  $("#danmu").danmu({    _text:[{"text":$("#danmuText").val(),"fontSize":"24px"}]  })})

 

js部分

// on 2016 06 16 by wangmiao(function($){  $.fn.danmu = function(o){    var defs = {      minSpeed : 3000,      maxSpeed : 5000,      _text:[],      _color:['#333','#ff4141','#60c7d0','#ff8201','#10ad54','#2c8ac0'],      _fontSize:['14px','16px','18px','20px','22px','24px']    }    var opt = $.fn.extend({}, defs , o);    var $this = $(this);    var method = {      creatEle:function(){        if($this.find(".cont").length==0){          $this.append('<div ></div>')        }        $.each(opt._text,function(index,value){          var num = method.setRandomNum(0,6);          var color,fontSize;          if(value.color){color = value.color}else{color = opt._color[num]}          if(value.fontSize){fontSize = value.fontSize}else{fontSize = opt._fontSize[num]}          var style = 'position:absolute;white-space:nowrap; left:'+$this.width()+'px;color:'+color+';font-size:'+fontSize+';';          var speed = (method.setRandomNum(opt.minSpeed,opt.maxSpeed)/1000).toFixed(1); //获取范围内随机速度          var delay = (method.setRandomNum(0,1000)/1000).toFixed(1);//获取范围内随机延迟时间          var top  = method.setRandomNum(0,parseInt($this.height())-30);//获取范围内随机垂直定位          style += 'top:'+top+'px;-webkit-transition:all '+speed+'s linear;-webkit-transition-delay:'+delay+'s;';          $this.find(".cont").append('<span style = "'+style+'">'+value.text+'</span>');          var time = parseInt(speed+delay)*1500;          method.clear($this.find(".text").eq(index),time)        })        method.moveing()              },      moveing:function(){        var width = parseInt($this.width())        $.each($this.find(".text"),function(index,value){          width += parseInt($(this).width());          $(this).css({"-webkit-transform":"translate3d("+-width+"px,0,0)"})        })      },      clear:function($obj,time){        console.log($obj,time)        setInterval(function(){          $obj.remove()        },time)      },      setRandomNum:function(a,b){        return parseInt(a+(b-a)*Math.random())      },      init:function(){        method.creatEle()      }    }    method.init()  }})(jQuery);