基于jquery实现弹幕效果

用js写的一个弹幕
效果图：
源码：
<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> <style type="text/css"> body { overflow: hidden; }.content { overflow: hidden; }.ctxt { background: burlywood; width: 100%; overflow: hidden; margin: 0 auto; z-index: 9999; }.ctxt p {left: 95%; margin: 0; padding: 0; z-index: 99; overflow: hidden; }#msg{ height: 24px; width: 200px; }#barrage { color: gainsboro; border: 1px solid aqua; font-size: 12px; border-radius: 10px; float: right; }#style { margin-top: 10px; }#publish { display: none; }video {width: 100%; overflow: hidden; z-index: -99999; }#danmu { position: absolute; overflow: hidden; font-size:20px; } </style> </head><body> <div class="content"><div id="" class="ctxt"> <video id="vodio" autoplay="autoplay"> <source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4"> </source></video> </div><div id="style"> <button id="barrage"> <font style="color: white;">开始弹幕</font></button> <div id="publish"> <form method="post" align="center"> <input type="text" id="msg" /> <button type="button" id="submitBut">发布</button> </form> </div></div> </div> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <script type="text/javascript"> $（document）.ready（function（） { $（"#barrage"）.click（function（） { $（"#publish"）.toggle（）; }）;$（"#submitBut"）.click（function（） {var msgtxt = $（"#msg"）.val（）;var colortxt = getReandomColor（）; var topPos = generateMixed（3）;if（topPos > 500） { topPos = 30; } var newtxt = "<p id="danmu" style="top:" + topPos + "px; color:" + colortxt + "">" + $（"#msg"）.val（） + "</p>"; $（".ctxt"）.prepend（newtxt）; var addTextW = $（".ctxt"）.find（"p"）.width（）; $（".ctxt p"）.animate（{ left: "-" + addTextW + 20 + "px" }, 30000, function（） { $（this）.hide（）; }）; $（"#msg"）.val（" "）;}）;}）; //随机获取颜色值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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。