微客导航 » 文章资讯 » jquery实现直播视频弹幕效果

jquery实现直播视频弹幕效果

2023-07-31 16:11:04 139

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

代码如下，复制即可使用：









JQ实现弹幕效果



*{

padding:0;

margin:0;

}

#box{

height:700px;

width:1000px;

margin:0auto;

border:1pxsolid#000000;

position:relative;

}

#main{

width:100%;

height:605px;

position:relative;

overflow:hidden;

}

p{

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;

}

$(function(){ varpageH=parseInt($("#main").height()); varcolorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"]; $("#btn").bind("click",auto); document.onkeydown=function(e){ if(e.keyCode==13){ auto(); } }; functionauto(){ var$value=$("#txt").val(); $("#main").append("

"+$value+"

"); $("#txt").val(""); var_top=parseInt(pageH*(Math.random())); varnum=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); }; })

实例扩展：




  
  
  
    html,body{
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
      font-family:"微软雅黑";
      font-size:62.5%;
    }
 
    .boxDom{
      width:100%;
      height:100%;
      position:relative;
      overflow:hidden;
    }
 
    .idDom{
      width:100%;
      height:10%;
      background:#666;
      position:fixed;
      bottom:0px;
    }
 
    .content{
      display:inline-block;
      width:460px;
      height:40px;
      position:absolute;
      left:0px;
      right:0px;
      top:0px;
      bottom:0px;
      margin:auto;
    }
 
    .title{
      display:inline;
      font-size:4em;
      vertical-align:bottom;
      color:#fff;
    }
 
    .text{
      border:none;
      width:300px;
      height:30px;
      border-radius:5px;
      font-size:2.4em;
    }
 
    .btn{
      width:60px;
      height:30px;
      background:#f90000;
      border:none;
      color:#fff;
      font-size:2.4em;
    }
 
    span{
      height:40px;
      position:absolute;
      overflow:hidden;
      color:#000;
      font-size:4em;
      line-height:1.5em;
      cursor:pointer;
      white-space:nowrap;
    }
    #boxDomvideo{
      width:80%;
      height:90%;
      float:left;
    }
    #boxDom.list-info{
      width:20%;
      height:90%;
      float:left;
      background-color:#666;
      overflow-y:auto;
      overflow-x:hidden;
      position:relative;
      z-index:999;
    }
    .list-infop{
      font-size:15px;
      line-height:20px;
      border-bottom:1pxdashed#ccc;
      text-indent:2em;
      color:#fff;
    }

吐槽:

发射

到此这篇关于jquery实现直播视频弹幕效果的文章就介绍到这了,更多相关JQ实现弹幕效果内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jquery实现直播视频弹幕效果

热门推荐

随机推荐