利用css和jquery制成弹幕

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