基于jquery的弹幕实现
前几天,需要做一个弹幕展示效果,看了网上很多资料,但是很不凑巧,都不能满足自己的需求和功能点,但是总不能放弃吧,那么就自己写一个,今天把成果分享给大家,首先说一下市面上比较流行的弹幕插件吧:
1.有关视频的弹幕 http://www.jq22.com/jquery-info2123
jquery.barrager.js
- 聊天弹幕 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的弹幕实现的更多相关文章
- jQuery+css3 弹幕
写了个基于jQuery+css3的弹幕功能,此功能面向手机wap,利用改变位移做弹幕功能会使一些性能低的手机浏览器卡,所以用了css3,此功能不支持非webkit内核浏览器 html部分 自己设置样式 ...
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- 基于jQuery的自适应图片左右切换
效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...
- 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- 模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
随机推荐
- 006.Kubernetes二进制部署ETCD
一 部署ETCD集群 1.1 安装ETCD etcd 是基于 Raft 的分布式 key-value 存储系统,由 CoreOS 开发,常用于服务发现.共享配置以及并发控制(如 leader 选举.分 ...
- 比较器中的comparing方法以及涉及到的知识
今天在学习Java核心技术集合程序清单9-3时遇到了问题. 代码如下 public class TreeSetTest { public static void main(String[] args) ...
- Docker学习-VMware Workstation 本地多台虚拟机互通,主机网络互通,解决name or service not known
NAT网络通用配置 测试连接 主机到虚拟机 虚拟机到虚拟机 ,虚拟机到外网 CentOS,提示name or service not known 设置DNS服务器 vi /etc/resolv.co ...
- BST的实现(二叉搜索树)
void Inorder(struct Tree *T); //中序 void Preorder(struct Tree *T); //前序 void Postorder(struct Tree *T ...
- ReentrantLock 如何实现非公平锁?和公平锁实现有什么区别
reentrant 英[riːˈɛntrənt] 美[ˌriˈɛntrənt] 先学会读.单词原意是可重入的 考察显示锁的使用.可延伸知识点 独占锁 & 共享锁 独占锁 - 悲观锁(不能同时被 ...
- MyBatis批量插入模板
oracle: <insert id="insertBatch" parameterType="List"> INSERT INTO TStuden ...
- 第一篇: openJDK源码编译安装--mac版本
1.为什么要编译JDK 想要一探JDK内部的实现机制,最便捷的路径之一就是自己编译一套JDK,通过阅读和跟踪调试JDK源码去了解Java技术体系的原理,虽然门槛高一点,但肯定比阅读各种书籍,文章,博客 ...
- 如何在当前文件夹打开cmd(基于win10)
如何在当前文件夹打开cmd(基于win10) 方法一: 1.先打开你要进入的文件夹 2.在标记的位置输入cmd,就可以进入当前文件的cmd 方法二: 1.打开你要进入的文件夹 2.通过shift + ...
- 3个例子详解C++ 11 中push_back 和 emplace_back差异
本文首发于个人博客https://kezunlin.me/post/b83bc460/,欢迎阅读最新内容! cpp11 push_back and emplace_back Guide case1 # ...
- 官方宣布IPV4已然耗尽,IPv6D风口或将到来?
急救箱 IPV4真的用完了吗? IPV4真的用完了吗?其实 小兰 一点也不惊讶 ,毕竟全球人口这么多,多N的几次幂就用完了吧- 43亿个IPv4地址已分配完毕,这意味着没已经有更多的IPv4地址可 ...