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

  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. 006.Kubernetes二进制部署ETCD

    一 部署ETCD集群 1.1 安装ETCD etcd 是基于 Raft 的分布式 key-value 存储系统,由 CoreOS 开发,常用于服务发现.共享配置以及并发控制(如 leader 选举.分 ...

  2. 比较器中的comparing方法以及涉及到的知识

    今天在学习Java核心技术集合程序清单9-3时遇到了问题. 代码如下 public class TreeSetTest { public static void main(String[] args) ...

  3. Docker学习-VMware Workstation 本地多台虚拟机互通,主机网络互通,解决name or service not known

     NAT网络通用配置 测试连接 主机到虚拟机 虚拟机到虚拟机 ,虚拟机到外网 CentOS,提示name or service not known 设置DNS服务器 vi /etc/resolv.co ...

  4. BST的实现(二叉搜索树)

    void Inorder(struct Tree *T); //中序 void Preorder(struct Tree *T); //前序 void Postorder(struct Tree *T ...

  5. ReentrantLock 如何实现非公平锁?和公平锁实现有什么区别

    reentrant 英[riːˈɛntrənt] 美[ˌriˈɛntrənt] 先学会读.单词原意是可重入的 考察显示锁的使用.可延伸知识点 独占锁 & 共享锁 独占锁 - 悲观锁(不能同时被 ...

  6. MyBatis批量插入模板

    oracle: <insert id="insertBatch" parameterType="List"> INSERT INTO TStuden ...

  7. 第一篇: openJDK源码编译安装--mac版本

    1.为什么要编译JDK 想要一探JDK内部的实现机制,最便捷的路径之一就是自己编译一套JDK,通过阅读和跟踪调试JDK源码去了解Java技术体系的原理,虽然门槛高一点,但肯定比阅读各种书籍,文章,博客 ...

  8. 如何在当前文件夹打开cmd(基于win10)

    如何在当前文件夹打开cmd(基于win10) 方法一: 1.先打开你要进入的文件夹 2.在标记的位置输入cmd,就可以进入当前文件的cmd 方法二: 1.打开你要进入的文件夹 2.通过shift + ...

  9. 3个例子详解C++ 11 中push_back 和 emplace_back差异

    本文首发于个人博客https://kezunlin.me/post/b83bc460/,欢迎阅读最新内容! cpp11 push_back and emplace_back Guide case1 # ...

  10. 官方宣布IPV4已然耗尽,IPv6D风口或将到来?

    急救箱 IPV4真的用完了吗? ​ IPV4真的用完了吗?其实 小兰 一点也不惊讶 ,毕竟全球人口这么多,多N的几次幂就用完了吧- 43亿个IPv4地址已分配完毕,这意味着没已经有更多的IPv4地址可 ...