今天来分享一下2014比较火的一个技术：弹幕。
工具/原料
jquery-1.11.1.min.js
记事本 Or Dreamweaver Or 其他能够编写网页的软件
快速使用
1、先建立一个Html网页，添加一个a标签（<a href="#" class="showBarrage">打开弹幕</a>）
2、再将弹幕的div层写好，代码如下：<div class="barrage"> <div class=媪青怍牙"screen"> <a href="#" class="s_close">X</a> <div class="mask"> <!--内容在这里显示--> </div> </div> <!--Send Begin--> <div class="send"> <input type="text" class="s_text"/> <input type="button" class="s_btn" value="说两句"/> </div> <!--Send End--> <span class="s_close">X</span> </div>这段代码用到的css：.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;} .barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;border-radius:20px;text-align:center;color:#fff;background:#000;line-height:40px;display:none;} .barrage .screen .mask{position:relative;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity:1);z-index:1;} .barrage{display:none;width:100%;height:100%;} .barrage .screen .mask div{position:absolute;font-size:20px;font-weight:bold;white-space:nowrap;line-height:40px;z-index:40;} .barrage .send{z-index:1;width:100%;height:55px;background:#000;position:absolute;bottom:0px;text-align:center;} .barrage .send .s_text{width:600px;height:40px;line-height:10px;font-size:20px;font-family:"微软雅黑";} .barrage .send .s_btn{width:105px;height:40px;background:#22B14C;color:#fff;}
3、最后写实现弹幕效果的js代码： &盟敢势袂lt;script src="js/jquery-1.11.1.min.js&鳎溻趄酃quot;></script> <script> $(function(){ $(".showBarrage,.s_close").click(function(){ $(".barrage,.s_close").toggle("slow"); }); init_animated(); }) //提交评论 $(".send .s_btn").click(function(){ var text = $(".s_text").val(); if(text == ""){ return; }; var _lable = $("<div style='right:20px;top:0px;opacity:1;color:"+getRandomColor()+";'>"+text+"</div>"); $(".mask").append(_lable.show()); init_barrage(); }) //初始化弹幕技术 function init_barrage(){ var _top = 0; $(".mask div").show().each(function(){ var _left = $(window).width()-$(this).width();//浏览器最大宽度，作为定位left的值 var _height = $(window).height();//浏览器最大高度 _top +=75; if(_top >= (_height -130)){ _top = 0; } $(this).css({left:_left,top:_top,color:getRandomColor()}); //定时弹出文字 var time = 10000; if($(this).index() % 2 == 0){ time = 15000; } $(this).animate({left:"-"+_left+"px"},time,function(){ $(this).remove(); }); } ); } //获取随机颜色 function getRandomColor(){ return '#' + (function(h){ return new Array(7 - h.length).join("0") + h } )((Math.random() * 0x1000000 << 0).toString(16)) } </script>
4、现在来看下效果
代码解读
1、先解读css吧，几个关键的代码：//相对布局和绝对布局position:relative;position:absolute;//这个后面的值谁最大，谁就在最上面z-index:2；//显示方式，none:不显示，block:显示display:none;display:block;//透明度opacity:0.5;//过滤不透明级别filter:alpha(opacity:1)//不允许文字换行，除非遇到<br>标签white-space:nowrap;