CSS3 完成弹幕的示例编码

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

近期必须新项目必须完成弹幕,在网上参照了各种各样方式,最终感觉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();
};

//将数字能量数组第1位放到最终1位,(因弹幕池內容太少,因此没删掉已显示信息的弹幕)
$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来建立弹幕的行数,随后在每行里边加上弹幕,并加上相应的动漫。当1个动漫实行结束后,将弹幕移回原处,拆换弹幕內容,再次实行动漫,这样防止了弹幕重合。每条弹幕动漫实行時间是依据弹幕长度决策的。

本人工作经验,期待大伙儿指出不够。上述编码应用的angularjs,但逻辑性全是1样

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。