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

  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,使用了时间戳,其实我们的打包很多项目都会使用这个会修改文件名称或者版本号

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

基于jquery的弹幕实现的更多相关文章

  1. jQuery+css3 弹幕

    写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...

  2. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

  3. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  4. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  5. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  6. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  7. 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  8. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  9. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

随机推荐

  1. 大数据之路week01--day02_2 集合方面的总结

    (初稿 太晚了,明天再进行补充) 1.对象数组(掌握) (1)数组既可以存储基本数据类型,也可以存储引用类型.它存储引用类型的时候的数组就叫对象数组. (2)案例: 用数组存储5个学生对象,并遍历数组 ...

  2. python经典算法题:Z字变形

    题目 直接看图! 思路第一步:分组 我们把传入的字符串进行分组, 每个框内的字母为1组: 我们发现每个相同颜色的框内的一组字母的特点是在传入的字符串中是连续的: 我们还发现每组字母的个数是由numRo ...

  3. canvas与工作流的不解之缘

    html的标签 <canvas>用于图形的绘制,通过脚本 (通常是JavaScript)来完成,canvas简而言之就是个画布.上一篇文章我们提到工作流的一个重要组成部分:流程建模,也就是 ...

  4. javascript 字符串转化成函数执行

    javascript 字符串转化成函数执行<pre>function func_abc(){ alert('a');}var str = "func_abc";eval ...

  5. node.js 需要注意知识点

    复习node.js 需要注意知识点--(重点) 2.1:参数传递获取造型 客户端脚手架(发)    (参数传递)    node.js(收) -发ajax  this.axios.get(" ...

  6. Python 基础之socket编程(一)

    Python 基础之socket编程(一) 可以进行通信玩儿了,感觉不错不错,网络通信就像打电话,我说一句你听一句之后,你再说一句,我听一句,就这样.....下去了.不扯淡了,来来来,看看今天都搞了点 ...

  7. springboot封装JsonUtil,CookieUtil工具类

    springboot封装JsonUtil,CookieUtil工具类 yls 2019-9-23 JsonUtil public class JsonUtil { private static Obj ...

  8. Resources for embedded SQL engine

    1. Official Website for SQLite: http://www.sqlite.org/ 2. .Net Wrapper for SQLite (System.Data.SQLit ...

  9. PowerMock学习(三)之Mock局部变量

    编写powermock用例步骤: 类上面先写这两个注解@RunWith(PowerMockRunner.class).@PrepareForTest(StudentService.class) 先模拟 ...

  10. Linux系统中文件行末尾出现^M的原因及解决办法

    不同系统,有不同的换行符号: 在windows下的文本文件的每一行结尾,都有一个回车('\n')和换行('\r') 在linux下的文本文件的每一行结尾,只有一个回车('\n'); 在Mac下的文本文 ...