巢湖微信小程序_jquery完成直播视频弹幕效果

2021-01-05 15:52

jquery实现直播视频弹幕效果       在本篇文章里小编给大家整理了关于JQ实现直播视频弹幕效果相关代码,需要的朋友们可以学习参考下。

JQ实现弹幕效果,快来吐糟你的想法吧

代码如下,复制即可使用:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" / 
 title JQ实现弹幕效果 /title 
 style type="text/css" 
 padding: 0;
 margin: 0;
 #box{
 height:700px;
 width:1000px;
 margin: 0 auto;
 border:1px solid #000000;
 position: relative;
 #main{
 width:100%;
 height:605px;
 position: relative;
 overflow: hidden;
 position: absolute;
 left:1000px;
 width:200px;
 top:0;
 #bottom{
 width:100%;
 height:80px;
 background: #ABCDEF;
 text-align: center;
 padding-top: 15px;
 position: absolute;
 left: 0;
 bottom: 0;
 #txt{
 width:300px;
 height:50px; 
 #btn{
 width:100px;
 height:50px; 
 /style 
 /head 
 body 
 div id="box" 
 div id="main" 

var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; $("#btn").bind("click",auto); document. unction(e){ if(e.keyCode == 13){ auto(); function auto(){ var $value = $("#txt").val(); $("#main").append(" p " + $value + " /p $("#txt").val(""); var _top=parseInt(pageH*(Math.random())); var num=parseInt(colorArr.length*(Math.random())); $("p:last-child").css({"top":_top,"color":colorArr[num],"font-size":"20px"}); $("p:last-child").animate({"left":"-200px"},10000); $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){ $(this).remove(); }); //console.log($value);
div id="boxDom"   video controls="controls" src="movie/10_2fdd2bbcd15cf07d4527cef2_3.mp4" /video   div /div   div id="idDom"   div   p 吐槽: /p   input type="text" id="text"/   button type="button" id="btn" 发射 /button   /div   /div /div script src="js/jquery-1.12.4.js" /script script  //生成随机颜色  var randomColor=function(){  var r= Math.floor(Math.random()*257);  var g= Math.floor(Math.random()*257);  var b= Math.floor(Math.random()*257);  return "rgb("+r+","+g+","+b+")";  }  //定义数组保存弹幕  var saveDan=[],index=0,tm;  //弹幕自动移动方法  var autoAnimate=function(){  index++;  index saveDan.length-1 (index=0);  saveDan[index].appendTo($("#boxDom")).animate({  "right":$(document).width(),  },10000,function () {  $(this).css("right",$(".").width()-$(this).width()).remove();  });  }  //点击创建弹幕  $("#btn").click(function () {  var txt=$("#text");  var randomTop=Math.floor(Math.random()*($("#boxDom video").height()-40));  if(txt.val().trim().length==0)return;  var span= $(" span /span ").text(txt.val()).css({  "color":randomColor(),  "top":randomTop,  "right":$(".").width(),  "z-index":888  });  saveDan.unshift(span);//将新的弹幕添加到数组内容的前面  //添加弹幕列表  $(" p /p ").text(txt.val()).css("color",randomColor()).prependTo($("."));  txt.val("");//清空文本框  //自动跑起来  clearInterval(tm);  index=saveDan.length-1  tm=setInterval(autoAnimate,1000);  });  //enter键确认发送  $(document).keydown(function (e) {  var e=e||window.event;  e.keyCode==13 ($("#btn").click());  }); /script /body /html

到此这篇关于jquery实现直播视频弹幕效果的文章就介绍到这了,更多相关JQ实现弹幕效果内容请搜索凡科以前的文章或继续浏览下面的



扫描二维码分享到微信

在线咨询
联系电话

020-66889888