基于jquery实现弹幕效果_Javascript教程-查字典教程网

用js写的一个弹幕

效果图：

基于jquery实现弹幕效果1

源码：

<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">  <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> <div id=""> <video id="vodio" autoplay="autoplay"> <source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4"> </source> </video> </div> <div id="style"> <button id="barrage"> <font>开始弹幕</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" + 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。