久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

CSS3 實現彈幕的示例代碼

本篇文章主要介紹了CSS3 實現彈幕的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

最近需要項目需要實現彈幕,網上參考了各種方法,最后覺得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();

至此,功能基本實現了。要關閉彈幕只需移除彈幕的區域,文中就沒有寫了。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 久久av一区二区三区 | 中文字幕亚洲一区二区三区 | 中文字幕av一区 | 99精品国产一区二区青青牛奶 | 伊人无码高清 | 国产亚洲精品精品国产亚洲综合 | 免费国产视频在线观看 | 国产免费一区二区三区网站免费 | 国产精品不卡视频 | 黄色网址在线免费观看 | 亚洲一区二区三区四区五区中文 | 久久精品免费 | 日韩一区二区三区视频在线播放 | 欧美日韩国产一区二区三区 | 国产一区| 三级黄色大片网站 | 欧美五月婷婷 | 国产一区二区三区免费观看视频 | 中文字幕av在线 | 一区在线播放 | 精品一区二区三区四区五区 | 欧美一级片中文字幕 | 国产成人高清成人av片在线看 | 亚洲电影中文字幕 | 伊人网影院 | 欧美日产国产成人免费图片 | 久久久久久久av | 天天久久 | 成人不卡| 欧美日韩三区 | 精品福利视频一区二区三区 | 日本涩涩视频 | 亚洲视频欧美视频 | 亚洲福利一区 | 久久久久久久久久久久久久av | 亚洲香蕉| 日韩精品一区二区三区中文在线 | 国产激情视频 | 在线观看黄色电影 | 国产最新视频在线 | 91视视频在线观看入口直接观看 |