JQuery和HTML5 Canvas实现弹幕效果
JQuery和HTML5 Canvas两种方法实现弹幕效果:
方法一,JQuery实现。
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>JQuery弹幕</title> <link href="" rel="stylesheet" /> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <style type="text/css"> .ctxt{ background:#666; width:1000px; height:400px; overflow:hidden; margin:0 auto; } .ctxt p{ position:relative; left:1000px; margin:0; padding:0; } </style> </head> <body> <div id="" class="ctxt"></div> <br /> <form method="post" action="" align="center"> <input type="text" id="msg" style="height:24px;width:200px;" /> <button type="button" id="submitBut">发布</button> </form> <script type="text/javascript"> $(document).ready(function(){ $("#submitBut").click(function(){ var msgtxt=$("#msg").val(); var colortxt = getReandomColor(); var topPos = generateMixed(3); if (topPos > 300) { topPos = 30; } var newtxt = '<p style="top:'+topPos+'px; color:'+colortxt+'">'+$("#msg").val()+'</p>'; $(".ctxt").prepend(newtxt); var addTextW = $(".ctxt").find("p").width(); $(".ctxt p").animate({left: '-'+addTextW+"px"}, 30000,function(){ $(this).hide(); }); }); }); //随机获取颜色值 function getReandomColor(){ return '#'+(function(h){ return new Array(7-h.length).join("0")+h })((Math.random()*0x1000000<<0).toString(16)) } //生成随机数据。n表示位数 var jschars = ['0','1','2','3','4','5','6','7','8','9']; function generateMixed(n) { var res = ""; for(var i = 0; i < n ; i ++) { var id = Math.ceil(Math.random()*9); res += jschars[id]; } return res; } </script> </body> </html>
方法二,HTML5 Canvas实现。
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> --> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Canvas弹幕</title> <link href="" rel="stylesheet" /> <style type="text/css"> #c1{background:#f1f1f1;} span{color:#FFFFFF;} </style> </head> <body> <canvas id="c1" width="600" height="300" > <span>该浏览器不支持html5</span> </canvas> <br /> <input type="text" name='smsg' value="" id="smsg" placeholder="请输入内容" /> <button id="send">发送</button> <!--<button id='start' onclick="startFun('test')">Start</button> <button id='stop' onclick="stopFun()">Stop</button>--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var sv; var sId; var oC; var oGC; var numW; var numH; var maxTxt = 600; $(function(){ $("#send").click(function(){ clearInterval(sId); var m = $("#smsg").val(); //alert(m); startFun(m); $("#smsg").val('') }); }) function doDraw(msg){ oC = document.getElementById('c1'); oGC = oC.getContext('2d'); numW = oC.width; numH = oC.height; console.log(numW+'-'+numH); oGC.fillStyle="red"; //oGC.fillRect(0,0,numW,100); oGC.fillText(msg,numW,100); } function startFun(msg){ doDraw(msg); sId = setInterval(function(){ if (numW > -610) { numW--; console.log(numW); oGC.clearRect(0,0,oC.width,oC.height); oGC.fillText(msg,numW,100); } else { oGC.clearRect(0,0,oC.width,oC.height); clearInterval(sId); } },10); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)