移动端页面弹幕小Demo实例说明
代码地址如下:
http://www.demodashi.com/demo/11595.html
弹幕小Demo实例地址,点击看效果
写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题
问题说明:
Demo中页面展示如下图所示:
如果图片挂了,请看文字说明:
简单的说弹幕只完成了一个功能,从右向左缓慢移动
Demo中所涉及到的文字参数说明如下:
- 行走translateX= 屏幕宽度+弹幕宽度 + 70
- 行走时间:屏幕宽度/50(初始时间)+弹幕宽度/500
- 批次间隔时间:Math.min(初始时间/2,4200)
- 移除条件:left<-(70+20)
ps:以上数字为自定的,无组织无规律,也可在对话框中设定更加无组织无纪律的数字,设定时请不要带单位,并没有做正则匹配~也没有做兼容~
未解决问题:
- 弹幕重叠问题:当弹幕不定长时,弹幕是按照一定时间通过
setInterval
来批次放出,而不是当前一个结束划入屏幕之后,后一个再出现,如果可以判定当前什么时候在屏幕内滑到什么位置,就可以准确放出后一个弹幕,这样避免了弹幕重叠,如果给弹幕设定长则可一定程度上避免重叠。 - 批次时间间隔设定问题:时间间隔设定较长,则避免长弹幕重叠,但短弹幕空白太大,时间间隔设定过短则长弹幕重叠,问题和上一个类似,如何在弹幕不定长时批次相隔紧凑且不重叠,这两个遇到的问题目前都没有解决
代码说明:
““
/*
*弹幕调用:Barrage.danMuInit(aqueue);
*弹幕插入:Barrage.danMuInsert(aqueue,data);
*aqueue=[{‘img’:xx,’content’:xx}] data={‘img’:xx,’content’:xx}
*/
var config = {
init_time:”,//屏幕内滑动时间
interval_time:”,//批次间隔时间
line:”,//弹幕分行
liWidth:”,//弹幕限宽
}
var Barrage = {
left:document.documentElement.clientWidth,
translateX:document.documentElement.clientWidth||0,
fontSize:’12’,
color:’#000’,
line:”,//弹幕所分行数
top:[],//弹幕分行时绝对定位top值
init_time:”,//弹幕屏内滑动时间
interval_time:”,//弹幕每批出现间距时间
timeCacluate:”,//弹幕暂停
liWidth:”,//强制设置liwidth
danMuInit:function(data){
var self = this;
self.top = [];
self.line = parseInt(config.line)||3;
self.init_time = parseInt(config.init_time)||document.documentElement.clientWidth/50;
self.interval_time = parseInt(config.interval_time)||Math.min(self.init_time*1000/2,4200);
for(var i = 0 ;i < self.line;i++){
self.top.push(”+i*30+’px’);
};
self.liWidth = parseInt(config.liWidth);
self.danMuPlay(aqueue);},danMuPlay:function(data){if(typeof(data)=='underined'){return;}var self = this;var strLength = 0;var strWidth = 0;var add_time = 0;//与init_time共同构成行走时间self.timeCacluate = setInterval(function(){var arr = [];for(var x = 0;x<self.top.length&&data.length > 0;x++){ arr.push('<li data-type="'+data[0].type+'" data-mid="'+data[0].source_id+'" style="position: absolute;left:'+self.left+'px;top:'+self.top[x]+';display: inline-block;white-space: pre;">');arr.push('![]('+data[0].img+')');arr.push('<span>'+data[0].content+'</span>');arr.push('</li>');//重复播放时数据填充var t = data.shift();bqueue.push(t);};$('.j_barrage').find('ul').append(arr.join('')); $('.j_barrage').find('ul span').css('width',''+self.liWidth+'px'); var liWidth = 0;//此li用于非定宽时存储每个li宽度var liLength = $('.j_barrage').find('ul').children().length;for(var j = 0;j < liLength;){ for(k = 0;k<self.top.length&&j < liLength;k++){ liWidth = $('.j_barrage').find('li').eq(j).width();add_time = liWidth/500;$('.j_barrage').find('li').eq(j).css({'transform':'translateX(-'+(self.left+liWidth+70)+'px)','left':''+self.left+'px' ,'transition':'transform '+(self.init_time+add_time)+'s linear'});j++;}} if(data.length == 0){self.danMuPause();} },self.interval_time) self.danMuClear(); },danMuInsert:function(queue,data){var self = this;var img = 'http://tva1.sinaimg.cn/default/images/default_avatar_male_50.gif';setTimeout(function(){queue.unshift({'img':img,'content':data.content}); if(queue.data == ''){self.danMuPlay(queue);} },2000);},danMuClear:function(){var clearLi = setInterval(function(){for(var i = 0;i<$('.j_barrage').find('ul').children().length;i++){if($('.j_barrage').find('ul').children().eq(i).offset().left<-90){console.log('remove')$('.j_barrage').find('ul').children().eq(i).remove();}}},1000)},danMuPause:function(){var self = this;clearInterval(self.timeCacluate);}
};
““
运行效果图
代码文件截图
单一一个文件:
ps:弹幕后场区……写错字了(弹幕候场区)……移动端页面弹幕小Demo实例说明
代码地址如下:
http://www.demodashi.com/demo/11595.html注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
移动端页面弹幕小Demo实例说明相关推荐
- 移动端触摸移动小demo
根据项目需要自己尝试做了一个div块的触摸移动效果,用原生js写的. 效果如下: 页面的html文档: <!DOCTYPE html> <html> <head> ...
- 支付宝微信PC端扫描支付小demo
####借鉴git上的大佬的准备工作说明,以及官方api说明. 准备工作: 1.配置AlipayConfig (1).注册蚂蚁金服开发者账号(免费,不像苹果会收取费用) 注册地址:https://op ...
- 微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
- python小项目实例流程-《Python编程:从入门到实践》DEMO实例代码
这篇文章主要知识点是关于Python编程,从入门到实践,DEMO,,的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书 前言 之前,项目后台基本都是使用 Java 的 SpringBo ...
- 移动端、微信小程序页面布局参考
转自:阮一峰的网络日志 自己手写移动端页面的时候,可参考大佬的这两篇文章.看完之后对页面布局非常有帮助.文章如下: Flex 布局教程:语法篇 网址:http://www.ruanyifeng.co ...
- 新闻类-仿搜狐页面小demo
大概用了一天时间仿了一个搜狐静态页面的小demo,页面上的新闻是10月1号祖国生日这天的,这种静态页面就是传统意义上的新闻类页面,因为还没学框架什么的所以所有代码布局都是一个一个敲出来的,然后我得出的 ...
- 将java类转换成jsp的例子_使用 动作可以在JSP页面中得到Bean实例的属性值,并将其转换为()_学小易找答案...
[单选题]下面哪个方法当服务器关闭时被调用,用来释放Servlet所占用的资源? [多选题]非处方药的遴选原则是( ). [单选题]主控制板与门机变频器有开门.关门命令.公共端,那么主控制板应该是() ...
- vue和java实现页面增删改_SpringBoot-Vue实现增删改查及分页小DEMO
前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程. 开发栈 前端 开 ...
- H5实例 移动端页面练习
文章目录 标签知识点 标签知识点 name = "viewport":屏幕设定 maximum-scale = 1.0, minimum-scale = 1.0, initial- ...
最新文章
- 人工智能的下一个道德挑战:如何对待动物
- c#中的interface abstract 与 virtual(转)
- mysql key_block_size_Mysql入门mysql Key_buffer_size参数的优化设置
- 2015年要学习和巩固的知识点
- 写一个函数的程序,判断是否是浮点数
- Mysql笔记之 -- replace()实现mysql 替换字符串
- NSUserDefaults 、对象归档
- mysql 存储过程 光标_mysql存储过程 光标
- android广告平台哪个好用,最新!59个信息流广告平台数据榜单!
- matlab2c使用c++实现matlab函数系列教程-pascal函数
- jsp中java代码的输出,Java控制台输入,输出!-JSP教程,Java技巧及代码
- 优秀班级答辩PPT模板
- 红米Note 5启用ROOT超级权限的经验
- C语言简介及进制换算
- [JSOI2009]有趣的游戏
- ESP8266/32 (Arduino)驱动SHT30获取温湿度
- 【阅读心得】Python编程无师自通——专业程序员的养成
- GEA 3.1 重温C++以及实践
- java excel解析:poi与jxl的区别(excel版本问题:xls,xlsx)
- CAFFE-SSD中loss、accuracy曲线可视化(双Y轴)