size osi alpha 瀏覽器 ring pac win cti init

1.首先上圖看下效果

2.廢話不多說，直接上代碼

1>html代碼

<div class="barrage">

<div class="screen"> <div class="content"> <!--內容在這裏顯示--> </div> </div> <!--發送對話框--> <div class="send"> <input type="text" class="s_text" placeholder="使用回車可以快速發送彈幕"/> <input type="button" class="s_btn" value="發送" /> <!--關閉彈幕功能--> <span class="barrage_close">關閉彈幕</span> </div> </div> 2>css部分 *{ padding: 0; margin: 0; } input{ outline: none; } .barrage .screen { width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background: url(../img/1.jpg); background-size: cover; } .barrage .screen .content { position: relative; width: 100%; height: 100%; background: #000; opacity:0.5; /* filter: alpha(opacity=100); *//***針對ie8以上或者更早的瀏覽器****/ background-color: transparent; z-index: 1; } .barrage { width: 100%; height: 100%; } .barrage .screen .content div { position: absolute; font-size: 20px; font-weight: bold; white-space: nowrap; line-height: 40px; z-index: 40; } .barrage .send { z-index: 1; width: 100%; height: 55px; line-height: 55px; background: #000; position: absolute; bottom: 0px; text-align: center; } .barrage .send .s_text { width: 600px; height: 40px; line-height: 40px; font-size: 16px; font-family: "微軟雅黑"; border-radius:20px;; } .barrage .send .s_btn { width: 105px; height: 40px; background: #22B14C; color: #fff; border-radius: 10px; } .barrage_close { position: absolute; right:210px; bottom:10px; width: 80px; height: 20px; border-radius: 10px; text-align: center; line-height: 20px; color: #22B14C; background: #fff; z-index: 99; } .barrage_close1{ color: #fff; background: #fff; } /* css動畫 */ .content div{ animation:Text 15s infinite normal; } @keyframes Text{ 0%{ left:100%; } 20%{ left:75%; } 80%{ left:0%; } 100%{ left:-30%; } } 3.js部分 　　　　$(function () { // $(".s_close").click(function () { // $(".barrage").toggle("slow"); // }); // $(".barrage_close").toggle(function(){ // }) // init_animated(); init_barrage(); }) //將彈幕內容放進數組貯存起來 //var arr=[]; //var h=arr.push() // 監聽發送，按enter發送 document.onkeydown=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(‘‘); }) //初始化彈幕技術 function init_barrage() { var _top = 0; $(".content div").show().each(function () { var _left = $(window).width() - $(this).width();//瀏覽器最大寬度，作為定位left的值 var _height = $(window).height();//瀏覽器最大高度 _top += 75; if (_top >= (_height - 130)) { _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)) } 3.效果演示查看：https://leader755.github.io/Barrrage/ 4.源碼獲取地址：https://github.com/Leader755/Barrrage

利用css和jquery制成彈幕