直播视频app源码，弹幕效果实现 jQuery
直播视频app源码，弹幕效果实现 jQuery功能的主要代码
主要实现功能：
点击弹幕按钮，开启弹幕编辑框
编辑好文本，点击发送按钮，文本就显示在弹幕框中
运用到的知识
Math.random( ) 随机获取
parseInt( ) 可解析字符串，并返回一个整数
append( ) 添加元素
animate({ },1000) 设置自定义动画
overflow: hidden 文本超出的部分隐藏
white-space:nowrap 文本不换行
代码如下：
html文件
```handlebars <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单的弹幕效果</title> <link rel="stylesheet" href="css/tanmu.css"> </head> <body> <!--弹幕框--> <div class="box"></div> <!--编辑内容--> <div class="banner"> <div class="mark"> <input class="content" type="text"> <button class="btn">提交</button> </div> </div> <!--开启弹幕--> <div class="header"> <div class="angle"> <div class="radius"></div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/tanmu.js"></script> </body> </html> ```
css文件
```handlebars html,body{ background:url(../images/beijing.jpg); height:100%; } *{ margin:0px; padding:0px; } .header{ position:absolute; top:50px; left:50px; } .header .angle{ position:relative; width:60px; height:30px; background-color:rgba(41, 40, 40, 0.5); border:1px solid #ddd; border-radius:20px;; } .header .radius{ position:absolute; top:1px; left:1px; width:25px; height:25px; background-color:#eee; border:1px solid #ddd; border-radius:50%; } /*弹幕编辑区*/ .banner{ display:none; position:fixed; bottom:0px; left:0px; width:100%; height:80px; background-color:rgb(29, 27, 27); } .banner .mark{ width:580px; height:35px; margin:25px auto; } .banner .content{ float:left; width:500px; height:35px; border-radius:10px 0px 0px 10px; outline:none; border:none; text-align:center; } .banner .btn{ float:left; width:80px; height:35px; border-radius:0px 10px 10px 0px; border:none; outline:none; background:green; } /*文本效果*/ span{ position:absolute; width:300px; height:40px; font-size:18px; color:#000; overflow:hidden;/*超出的部分隐藏*/ white-space: nowrap;/*文本不换行*/ } ```
js文件
```handlebars $(".header .radius").click(function(){ $(this).animate({ marginLeft:28 },1000) $(".banner").show(); //开启弹幕编辑框 }) $(".banner .btn").click(function(){ var colors=["red","pink","green","yellow","gray","blue","black"]; var randomY=parseInt(Math.random()*500);//随机获取span的高度（parseInt函数把字符串解析成数字，使用parseInt方法，可以返回一个整数） var randomColor=parseInt(Math.random()*colors.length);//随机获取颜色 var value=$(".banner .content").val();//获取输入框的值 var span=$("<span>"+value+"</span>");//新建元素并赋予value值 $(".box").append(span);//添加元素 span.css("left","1530px").css("top",randomY).css("color",colors[randomColor]).animate({ //设置自定义动画 left:-500 },10000,function(){ $(this).remove();//清除弹幕 }) }) ```
以上就是 直播视频app源码，弹幕效果实现 jQuery功能的主要代码，更多内容欢迎关注之后的文章
