CSS3 实现弹幕的示例代码


Posted in HTML / CSS onAugust 07, 2017

最近需要项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。

1.首先创建弹幕区域

<div class="barrage">
<div class="mask">
<!--//弹幕内容-->
</div>
</div>

<input type="text" ng-model="data.comment"/>
<button ng-click="addDanmu()">说两句</button >

2.css

.webPage .barrage{width:100%;height:22%;position: absolute; bottom: 50px; background-color: transparent;pointer-events: none;}
.webPage .barrage .mask{width:100%;height:100%;background:transparent;z-index:100;}

注:以上html,css根据自己需求来即可

3.js

$scope.data = {comment:''};
$scope.danmuCount = 5; //最大弹幕行数
$scope.danmus = ['1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565', '1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565']; //弹幕数据源

//创建弹幕区域
$scope.createDanmuContent = function () {
var height = 1 / $scope.danmuCount * 100 + '%';
for (var i = 0; i < $scope.danmuCount; i++) {
var item = '<div style="width: 100%; height: '+height+'"></div>';
$('.mask').append(item);
}
 $scope.createDanmu ();
};

//开始弹幕绘制
$scope.createDanmu = function () {
var maxCount = 0;
if ($scope.danmus.length > $scope.danmuCount) {
 maxCount = $scope.danmuCount;
 } else {
maxCount = $scope.danmus.length;
}
var _left = window.screen.width;
for (var i = 0; i < maxCount; i++) {
var _lable = $("<p style='margin: 0;position: absolute;opacity:1;display:table;left: "+_left + 'px'+';color:'+$scope.getRandomColor()+"'>"+$scope.danmus[i]+"</p>");
$(".mask div").each(function () {
//检测该区域是否绘制了弹幕
if ($scope.checkDanmu($(this))) {
$(this).append(_lable);
$scope.moveArray(i);
 i--;
return false;
}
});
}
$scope.init_barrage();
};

//将数组第一位放到最后一位,(因弹幕池内容太少,所以没删除已显示的弹幕)
$scope.moveArray = function (i) {
 var temp = $scope.danmus[i];
$scope.danmus.splice(i,1);
$scope.danmus.push(temp);
}
//判断content区域有没有弹幕
$scope.checkDanmu = function (el) {
return el.find('p').length == 0 ? true : false;
};
//获取随机颜色
$scope.getRandomColor = function () {
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
};

//初始化弹幕参数
$scope.init_barrage = function () {
$(".mask div p").show().each(function() {
 var _moveLeft = window.screen.width+$(this).width();
var time = 100000 / $(this).width() + 5000;//弹幕滑动时间
$scope.addCssAnimate($(this),_moveLeft,time);
});
};

//添加弹幕动画
$scope.addCssAnimate = function (el,_moveLeft,time) {
el.css({
'transform':'translateX('+-_moveLeft+'px)',
'transition':'all '+time+'ms'+ ' linear',
'-webkit-transform':'translateX('+-_moveLeft+'px)',
'-webkit-transition':'all '+time+'ms'+ ' linear',
'-moz-transform':'translateX('+-_moveLeft+'px)',
'-moz-transition':'all '+time+'ms'+ ' linear',
'-ms-transform':'translateX('+-_moveLeft+'px)',
'-ms-transition':'all '+time+'ms'+ ' linear'
});
//当动画执行完毕后,将弹幕移到原处,更换弹幕文字,重新开始执行动画,相当于对原本弹幕的复用
$timeout(function () {
//判断弹幕池是否还有内容,如果没有则移除弹幕
if ($scope.danmus.length > 0) {
el.css({
'transform':'translateX(0px)',
'transition':'all 0ms linear',
'-webkit-transform':'translateX(0px)',
'-webkit-transition':'all 0ms linear',
'-moz-transform':'translateX(0px)',
'-moz-transition':'all 0ms linear',
'-ms-transform':'translateX(0px)',
'-ms-transition':'all 0ms linear'
});
$scope.resetAnimate(el);
} else {
el.remove();
}
},time);
};

//更换弹幕内容,重新开始弹幕动画
$scope.resetAnimate = function (el) {
el.html($scope.danmus[0]);
$scope.moveArray(0);
var _moveLeft = el.width() + screen.width;
var time = 100000 / el.width() + 5000;
$scope.addCssAnimate(el,_moveLeft,time);
};

//评论,添加弹幕
$scope.addDanmu = function () {
var text = $scope.data.comment;
if(text == ""){
return;
}
$scope.danmus.unshift(text);
};

$scope.createDanmuContent();

至此,功能基本实现了。要关闭弹幕只需移除弹幕的区域,文中就没有写了。

逻辑:首先根据$scope.danmuCount来创建弹幕的行数,然后在每行里面添加弹幕,并添加相应的动画。当一个动画执行完毕后,将弹幕移回原处,更换弹幕内容,重新执行动画,这样避免了弹幕重叠。每条弹幕动画执行时间是根据弹幕长度决定的。

个人经验,希望大家指出不足。上述代码使用的angularjs,但逻辑都是一样

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 #HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 #HTML / CSS
You might like
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python imread、newaxis用法详解
2019/11/04 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
物流仓管员岗位职责
2013/12/04 职场文书
班主任工作经验材料
2014/02/02 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
销售主管竞聘书
2014/03/31 职场文书
英语系本科生求职信
2014/07/15 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
电话营销开场白
2015/05/29 职场文书
水浒传读书笔记
2015/06/25 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
MySQL多表查询机制
2022/03/17 MySQL
python超详细实现完整学生成绩管理系统
2022/03/17 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android