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部分
(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 class="cont" style="width:100%; height:100%; position:relative"></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 class="text" style = "'+style+'">'+value.text+'</span>'); var time = parseInt(speed+delay)*1500; method.clear($this.find(".text").eq(index),time) }) method.moveing() }, moveing:function(){ $.each($this.find(".text"),function(index,value){ var width = parseInt($this.width())+parseInt($(this).width()); $(this).css({"-webkit-transform":"translate3d("+-width+"px,0,0)"}) }) }, clear:function($obj,time){ console.log($obj,time) setTimeout(function(){ $obj.remove() },time) }, setRandomNum:function(a,b){ return parseInt(a+(b-a)*Math.random()) }, init:function(){ method.creatEle() } } method.init() } })(jQuery);
追求原创特效