1. Сначала покажите оригинальную картинку с видео заграждения, факты говорят сами за себя.
2. Отображение кода
1> отображение HTML-кода
<div class=barrage> <video id=myvideo, ширина цикла автозапуска=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -Здесь отображается содержимое --> </div> </div> <!--Диалоговое окно "Отправить" --> <div class=send> <input type=text class=s_text Placeholder=Используйте Enter для быстрой отправки заграждения/> <input type=button class=s_btn value=Send/> <!--Закрыть функцию заграждения--> <span class=barrage_close>Закрыть заграждение</span> < !-- Mute function--> <span id=muted>Включить звук</span> </div> </div>
2> отображение CSS-кода
*{ отступ: 0; поле: 0;}input{ контур: нет;}.barrage { позиция: относительная; ширина: 100%; высота: 250 пикселей;}#myvideo{ позиция: абсолютная; /* ширина: 100%; :300px; */ сверху: -50px; слева: 0; z-index: -1;}.barrage .screen { позиция: сверху: 0px; справа: 0 пикселей; ширина: 100%; высота: 300 пикселей;}.barrage .screen .content { позиция: относительная; ширина: 100%; высота: 250 пикселей; фон: #000; /* фильтр: альфа (непрозрачность) =100); *//***Для браузеров ie8 или выше или более ранней версии ****/background-color: z-index: 1;}.barrage .screen .content div { позиция: абсолютный; размер шрифта: 20 пикселей; вес шрифта: жирный; высота строки: 40 пикселей;}.barrage .send { позиция: абсолютная; внизу: 0 пикселей; высота: 55 пикселей; высота строки: 55 пикселей; 1; /*background: #000;*/ background: rgba(0,0,0,0.5); text-align: center; /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { ширина: 60%; высота: 35 пикселей; высота строки: 35 пикселей; размер шрифта: 16 пикселей; семейство шрифтов: Microsoft Yahei; граница-радиус: 20 пикселей; непрозрачность: 0,8;}.barrage .send .s_btn { ширина: 105 пикселей; высота строки: 35 пикселей; фон: #22B14C; -радиус: 10 пикселей, непрозрачность: 0.8;}.barrage_close,#muted { ширина: 80 пикселей; высота: 30 пикселей; граница-радиус: 10 пикселей; выравнивание текста: по центру; фон: #fff; курсор: непрозрачность; : 0.8;}#muted{background:yellow;}.barrage_close1{color: #fff; фон: #fff;}/* css анимация*/.content div{ анимация:Текст 15 секунд, бесконечный нормальный;}@keyframes Text{ 0%{ left:100% } 20%{ left:75% } 80; % { осталось: 0% } 100 % { осталось: -30 % }}3> отображение кода js
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Помещаем содержимое заграждения в массив для хранения it var arr=[];var h=arr.push();// Контролируем отправку, нажмите Enter, чтобы отправить document.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click(); //Отправить комментарий $(.send .s_btn); .click(function () { var text = $(.s_text).val(); if (text == ) { alert('Ваш контент пуст, пожалуйста, заполните комментарии перед отправкой'); return false; var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + text + </div>); $(.content).append(_lable.show()); init_barrage(); $(.s_text).val();});//Инициализируем функцию технологии заграждения init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//Максимальная ширина браузера (также высота браузера), как значение позиционирования слева console.log(_left); =$(.barrage).height();//Максимальная высота видеоокна console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // Регулярно всплывающий текст // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000 // } // $(this).animate({ left: - + _left + px }, time, function () { // $(this).remove(); // });}//Получаем случайный цвет function getColor() { return '#' + (function (h) { return new Array(7) - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(myvideo);var mute=document.getElementById( muted);console.log(muted);//Установим скорость воспроизведения видео//video.playbackRate = 0.5;//Видео отключено video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; mute.innerText = 'Включить звук'; // console.log(1111) }else{ video.muted = true; mute.innerText=''; mute.innerText = 'Выключить звук'; console.log(2222) }}3. Демонстрация эффекта кода
<a style="margin: 0px; отступ: 0px; контур: нет; line-height: 25,2px; размер шрифта: 14px; ширина: 660px; переполнение: скрыто; очистить: оба; семейство шрифтов: tahoma, arial, Майкрософт ЯХей;"><div class=barrage> <video id=myvideo цикл автозапуска width=100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { позиция: относительная ширина; : 100%; высота: 250 пикселей;}#myvideo { позиция: абсолютная; /* ширина: 100%; высота: 300 пикселей */ верх: -50px; слева: 0; z-индекс: -1;</style>Подвести итогВышеупомянутая функция видеозаграждения, реализованная в HTML5, введенная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!
Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!