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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
不要在HTML中滥用div
May 08 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
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php自定义hash函数实例
2015/05/05 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
jQuery的三种$()
2009/12/30 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python实现移位加密和解密
2019/03/22 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
信息技术培训感言
2014/03/06 职场文书
给学校的建议书范文
2014/05/15 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
化学工程专业求职信
2014/08/10 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server