亲宝软件园·资讯

展开

基于jquery的弹幕实现

星光笔 人气:0

前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧:

  1. 1.有关视频的弹幕 http://www.jq22.com/jquery-info2123

  2. jquery.barrager.js

  3. 聊天弹幕 http://www.bootstrapmb.com/item/6429

当然网上也有很多插件,重点说一下我看的这三款,第一款如果不碰撞还可以,但是不适合vue,需要自己改造,第二个会出现一个问题,弹幕数量过多时整体会卡顿,不适合大型弹幕效果,需要大家限制一下加载的条数;

下面先把我的简单的demo呈现给大家:

样式部分:

.barrage_box{
    position: absolute;
    left:1080px;
    top:170px;
    background:rgba(208,70,91,0.56);
    border:1px solid rgba(255,255,255,0.56);
    border-radius: 30px;
    padding:8px 24px;
    line-height: 40px;
    font-size:24px;
    color:#fff;
    white-space: nowrap;
}

这里需要注意一下,这个弹幕需要添加层级,因为内容是未知的,所以我们写的时候不要宽度写死,不然弹幕会出现超出的情况,这个添加了不许换行,除非br,这里的背景色和字体设置以及border、位置都可以先写死,后面做成活的,也就是我们面向对象思想中的options,或者插件的配置项;

下面是最简单的js

function barragers(text){
   var $last = $('.barrage_box');
   if($last.length>0){
      var top = parseInt($($last[$last.length-1]).css('top'))=='NaN'?0:parseInt($($last[$last.length-1]).css('top'));
      var right = parseInt($($last[$last.length-1]).css('left'))=='NaN'?0+$($last[$last.length-1]).width():parseInt($($last[$last.length-1]).css('left'))+$($last[$last.length-1]).width();
      var id = new Date().getTime();
      var str = '<div class="barrage_box"  id="'+id+'">'+text+'</div>';
            $('body').append(str);
            var left= $('#'+id).width()+60;
            if(left<right){
               var tops= '';
               var top1 = top+65
               if(top1<280){
                   tops = top1
                }
                if(top1>280&&top1<840){
                   tops= 860
                }
                if(top1<1000&&top1>860){
                   tops = top1
                }
                $('#'+id).css('top',tops+'px');
                $('#'+id).animate({left:'-'+left+'px'},24000,function(){
                  $(this).remove();
                })
              }     
            }else{
                    var id = new Date().getTime();
                    var str = '<div class="barrage_box"  id="'+id+'">'+text+'</div>';
                    $('body').append(str);
                    var left= $('#'+id).width()+60;
                    $('#'+id).animate({left:'-'+left+'px'},24000,function(){
                        $(this).remove();
                    })
                }
                
            }

需要注意的是我们每一次添加一个弹幕消息,需要唯一一个id,这样可以保证我们每一次都是一个独有的元素,同时判断动画执行完毕后,我们删除当前的元素,这样不会添加非常多的dom,这里的tops如果需要随机,可以利用math.random去实现随机位置控制和判断,因为我项目对于位置有一定的要求,所以添加了判断。注意唯一id,使用了时间戳,其实我们的打包很多项目都会使用这个会修改文件名称或者版本号

可以自己修改一下这个就可以实现弹幕效果了

加载全部内容

相关教程
猜你喜欢
用户评论