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

  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. git下载安装

    git是目前最流行的分布式版本控制系统,使用它可以很方便的对项目进行管理备份. 1.git下载 登录git官网https://git-scm.com/,点击downloads即可下载安装包 安装包如下 ...

  2. Java基础知识之常量变量(一)

    1.什么是变量,什么是常量?java的基本数据类型是什么 变量: 会发生改变的数据,叫做变量,如自定义一个a,并且对a进行赋值操作为1,也可以让a等于2,此时a就是一个变量 常量: 不会发生改变的值, ...

  3. C# II: Class ViewModelBase and RelayCommand in MVVM

    好久不写WPF和MVVM,新建一个Project后,想起来ViewModelBase和RelayCommand没有.以下Code摘自MSDN上的Article:Patterns - WPF Apps ...

  4. [WPF] Caliburn Micro学习一 Installation

    在之前的文章(http://blog.csdn.net/alvachien/article/details/5670838)里面,已经提到过MVC和MVVM在Design Pattern上的比较. 首 ...

  5. tornado的使用-参数篇

    tornado的使用-参数篇

  6. 【Spring】Spring的定时任务注解@Scheduled原来如此简单

    1 简介 定时任务的实现非常多,JDK的Timer.Spring提供的轻量级的Scheduled Task.QuartZ和Linux Cron等,还有一些分布式的任务调度框架.本文主要介绍Schedu ...

  7. 【Error】Maven Dependency 下载失败问题

    原文 前言 在使用Maven私服Sonatype Nexus的时候,经常会出现依赖包找不到的问题. 此时通过浏览器去私服页面查看,发现依赖包坐标是存在的,对应的文件(比如jar文件). 或者私服上面也 ...

  8. P4-verilog实现mips单周期CPU

    最近对学习的掌控可能出现了问题,左支右绌,p2挂了,p2.p3.p4.p5每周在计组花的连续时间少了很多,学习到的东西也少了很多,流水线都还没真正开始写,和别人比落后了一大截,随笔自然就荒废了,我得尽 ...

  9. nyoj 50-爱摘苹果的小明 (比较)

    50-爱摘苹果的小明 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:10 submit:15 题目描述: 小明家的院子里有一棵苹果树,每到秋天树上就 ...

  10. nyoj 198-数数 (python, string[::-1])

    198-数数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:16 提交数:25 难度:2 题目描述: 我们平时数数都是喜欢从左向右数的,但是我们的小白同学最近听说德国人数数和我们有 ...