JQuery和HTML5画布实现弹幕效果

JQuery和HTML5画布两种方法实现弹幕效果：

方法一，JQuery实现。源码：

！DOCTYPE html html标题元字符集='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='样式表'/脚本类型=' text/JavaScript ' src=' http :http://apps。bdimg。com/libs/jquery/1。9 .1/jquery。量滴js /脚本样式类型='text/css ' .ctxt {背景： # 666宽度宽度：1000像素高度：400 px飞越：隐藏；margin:0 auto}。ctxt p { position : relative eleft :1000 pxmargin :0划水：0;}/style/head body div id=' class=' ctxt '/div br/form method=' post ' action=' align=' center '输入类型=' text ' id=' msg ' style=' height :24 px；'width :200 px '/button type=' button ' id=' Submit but '发布/按钮/表单脚本类型='text/javascript' $(文档)。ready(function(){ $('#submitBut ')).单击(函数(){ var msgtxt=$('#msg ')).val()；var colortxt=Getreandomocolor()；var TopOS=生成混合(3)；if(ToPoS 300){ ToPoS=30；} var new txt=' p style=' top : ' ToPoS ' px；color : ' color txt ' ' $(' # msg ').val()'/p '；$('.ctxt ').prepend(新txt)；var addTextW=$(' .ctxt ').查找(' p ').宽度();$('.ctxt p ').animate({ left : '-' addTextW ' px ' })，30000，function(){ $(this).hide()；});});});//随机获取颜色值函数getReandomColor(){ 0返回' # '(函数(h){返回新数组(7-h .长度)).join(' 0 ')h })((数学。random()*0x 10000000).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方法二，HTML5画布实现。源码：

！DOCTYPE html html标题元字符集='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 canvas弹幕/title link href=' rel='样式表/style type=' text/CSS ' # C1 { background : # f1 f1；} span { color : # FFFFFF }/样式/头身画布id=' C1 '宽度=' 600 '高度=' 300 '跨度该浏览器不支持html5/span /canvas br /输入类型=' text '名称=' smsg '值=' id=' smsg '占位符='请输入内容/button id="发送"发送/button！-按钮id=' Start ' onclick=' startFun(' test ')' Start/button按钮id=' Stop ' onclick=' Stop fun()' Stop/button-脚本类型=' text/JavaScript ' src=' http :http://apps。bdimg。com/libs/jquery/1。9 .1/jquery。量滴js /脚本类型=' text/JavaScript ' var SV；var sIdvar oCvar oGCvar numWvar num var maxTxt=600 $(function(){ $(' # send ')).click(function(){ clearInterval(SiD))；var m=$('#smsg ').val()；//alert(m)；startFun(m)；$('#smsg ').val(" " })；})函数DodRaw(msg){ oC=文档。GetElementByID(' C1 ')；oGC=oc。get context(' 2d ')；numW=oc . width numh=oc . height console。log(NumW '-' NumH)；OGC . fill style=' red//OGC . fill rect(0，0，numW，100)；oGC.fillText(msg，numW，100)；}函数startFun(msg){ DodRaw(msg)；sId=setInterval(function(){ if(NumW-610){ NumW-；控制台。对数(NumW)；oGC.clearRect(0，0，oC.width，oC。高度)；oGC.fillText(msg，numW，100)；} else { oGC.clearRect(0，0，oC.width，oC。高度)；clearInterval(SiD)；} },10);}/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。