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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php查询及多条件查询
2017/02/26 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
大学生毕业自我鉴定范文
2013/09/19 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
护士自荐信怎么写
2015/03/06 职场文书
学校运动会开幕词
2016/03/03 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python