基于jquery实现弹幕效果

用射流研究…写的一个弹幕效果图：

源码：

超文本标记语言头元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=边'元名称=“视口”内容=' width=设备宽度，初始比例=1 '！- link href='favicon.ico' rel='快捷图标type=' image/x-icon '/link href=' fav icon。ico ' rel=' Bookmark '类型=' image/x-icon '/-meta name=' Generator '内容=' EditPlus ' meta name=' Author '内容=' meta name=' Keywords '内容=' meta name=' Description '内容=' title jquery弹幕/title link href=' rel='样式表/script style type=' text/CSS '正文{溢出：隐藏；} .内容{ overflow:隐藏；} .ctxt { background: burlywood宽度： 100%;飞越：隐藏；margin: 0 autoz指数： 9999；} .ctxt p {左： 95%；保证金： 0；padd : 0；z指数： 99；飞越：隐藏；} # msg { height: 24px宽度： 200像素；} #弹幕{ color : gainsboroborder : 1px固体水；font-size : 12px边框半径： 10px向右浮动：} # style { margin-top : 10px；} #发布{ display: none}视频{宽度： 100%；飞越：隐藏；z指数：-99999;} #母丹{绝对位置：飞越：隐藏；font-size :20 px}/style/head body div class=' content ' div id=' class=' ctxt ' video id=' vodio ' autoplay=' autoplay ' source src=' http : video/1429411761 ed3d DC 100 c 73251。MP4 ' type=' video/MP4 '/source/video/div id=' style ' button id=' barra ' font style=' color : white；'开始弹幕/font/button div id=' publish '表单方法='post' align='center '输入类型='text' id='msg' /按钮类型='button' id='submitBut '发布/按钮/表单/div /div /div脚本类型=' text/JAVAScript ' src=' http : js/jquery-2。1 .1 .量滴js /脚本脚本类型='text/javascript' $(文档)。ready(function(){ $(' #)弹幕'))。单击(函数(){ $('#publish ')).toggle()；});$('#submitBut ').单击(函数(){ var msgtxt=$('#msg ')).val()；var colortxt=Getreandomocolor()；var TopOS=生成混合(3)；if(ToPoS 500){ ToPoS=30；} var newtxt='p id='母丹style=' top : ' TopOS ' pxcolor : ' color txt ' ' $(' # msg ').val()'/p '；$('.ctxt ').prepend(新txt)；var addTextW=$(' .ctxt ').查找(' p ').宽度();$('.ctxt p ').animate({ left : '-' addTextW 20 ' px ' })，30000，function() { $(this).hide()；});$('#msg ').val(" ")；});});//随机获取颜色值函数getReandomColor(){ 0返回' # '(函数(h) {返回新数组(7 - h .长度)).join(' 0 ')h })((数学。random()*0x 1000000(0).toString(16)) } //生成随机数据n。表示位数var jschars=['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 ']；函数生成混合(n){ var RES=' '；for(var I=0；I n；I){ var id=math。天花板(数学。random()* 9)；RES=js字符[id]；}返回res}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。