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图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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 cdata 处理(详细介绍)
2013/07/05 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
广告显示判断
2006/08/31 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
老生常谈js数据类型
2017/08/03 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
浅谈Python爬虫基本套路
2019/03/25 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
上海某公司.net方向笔试题
2014/09/14 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
《临死前的严监生》教学反思
2014/02/13 职场文书
阳光体育活动总结
2014/04/30 职场文书
面试必备的求职信
2014/05/25 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年部门工作总结
2014/11/12 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
python实现Nao机器人的单目测距
2021/09/04 Python
python编程项目中线上问题排查与解决
2021/11/01 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers