使用CSS3怎么實現(xiàn)一個彈幕功能-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)使用CSS3怎么實現(xiàn)一個彈幕功能，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)服務(wù)項目包括綿竹網(wǎng)站建設(shè)、綿竹網(wǎng)站制作、綿竹網(wǎng)頁制作以及綿竹網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，綿竹網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到綿竹省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.首先創(chuàng)建彈幕區(qū)域

<div class="barrage">
<div class="mask">
<!--//彈幕內(nèi)容-->
</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根據(jù)自己需求來即可

3.js

$scope.data = {comment:''};
$scope.danmuCount = 5; //較大彈幕行數(shù)
$scope.danmus = ['1545466666還是','9777777','哈哈哈哈哈','對企業(yè)讀完后環(huán)球網(wǎng)好齊齊哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段時間66','56565','454465465565', '1545466666還是','9777777','哈哈哈哈哈','對企業(yè)讀完后環(huán)球網(wǎng)好齊齊哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段時間66','56565','454465465565']; //彈幕數(shù)據(jù)源

//創(chuàng)建彈幕區(qū)域
$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 () {
//檢測該區(qū)域是否繪制了彈幕
if ($scope.checkDanmu($(this))) {
$(this).append(_lable);
$scope.moveArray(i);
 i--;
return false;
}
});
}
$scope.init_barrage();
};

//將數(shù)組第一位放到最后一位,（因彈幕池內(nèi)容太少，所以沒刪除已顯示的彈幕）
$scope.moveArray = function (i) {
 var temp = $scope.danmus[i];
$scope.danmus.splice(i,1);
$scope.danmus.push(temp);
}
//判斷content區(qū)域有沒有彈幕
$scope.checkDanmu = function (el) {
return el.find('p').length == 0 ? true : false;
};
//獲取隨機(jī)顏色
$scope.getRandomColor = function () {
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
};

//初始化彈幕參數(shù)
$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'
});
//當(dāng)動畫執(zhí)行完畢后，將彈幕移到原處，更換彈幕文字，重新開始執(zhí)行動畫，相當(dāng)于對原本彈幕的復(fù)用
$timeout(function () {
//判斷彈幕池是否還有內(nèi)容，如果沒有則移除彈幕
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);
};

//更換彈幕內(nèi)容，重新開始彈幕動畫
$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();

以上就是使用CSS3怎么實現(xiàn)一個彈幕功能，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：使用CSS3怎么實現(xiàn)一個彈幕功能-創(chuàng)新互聯(lián)
標(biāo)題來源：http://www.bm7419.com/article34/cesjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、全網(wǎng)營銷推廣、軟件開發(fā)、用戶體驗、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)