html css jq 弹幕,jQuery实现的弹幕效果完整实例

本文实例讲述了jQuery实现的弹幕效果。分享给大家供大家参考，具体如下：

看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。

先来看看运行效果：

下面将整个代码显示出来：

www.jb51.net弹幕

html,body{

background:#efefef;

height:100%;

}

.danmu{

width: 100px;

height:30px;

line-height: 28px;

background: green;

border-radius: 5px;

border:1px solid #fff;

color: #fff;

outline: none;

}

div.mask{

position:fixed;

width:100%;

height:100%;

background:rgba(0,0,0,0.8);

opacity:0.5;

top:0px;

left:0px;

}

div.bottom{

width:100%;

height:77px;

background:linear-gradient(#ccc,#4a4a4a);

position:fixed;

bottom:0px;

left:0px;

text-align:center;

line-height:77px;

}

div.bottom input.content{

width:50%;

min-width: 200px;

height:37px;

border:none;

border-radius:10px 0px 0px 10px;

font-size:16px;

padding:0 10px;

outline:none;

}

div.bottom a.send{

background-color:green;

color:#fff;

display:inline-block;

width:100px;

height:38px;

line-height:37px;

text-align:center;

position:relative;

left:-10px;

top:2px;

border-radius:0px 10px 10px 0px;

text-decoration:none;

font-family:'Microsoft Yahei';

}

div.mask a.button{

width:30px;

height:30px;

border-radius:50%;

background-color:green;

color:#fff;

position:fixed;

top:20px;

right:20px;

text-align:center;

line-height:30px;

font-size:20px;

font-family:'Microsoft Yahei';

border:1px solid #fff;

text-decoration:none;

cursor:pointer;

}

div.text{

color:#fff;

position:fixed;

right:0px;

font-size:20px;

white-space: nowrap;

}

弹幕技术

X

发表言论

$("a.send").click(function(){

var val=$(".content").val();

var content=$("

"+val+"

");

var top=Math.random()*$(document.body).height()+40+"px";

content.css("top",top);

$(".mask").append(content);

content.animate({right:$(document.body).width()+100},8000,function(){

$(this).remove();

})

});

$('.button').click(function(){

$('div.mask').fadeOut(500);

});

$(".danmu").click(function(){

$('div.mask').fadeIn(500);

});

希望本文所述对大家jQuery程序设计有所帮助。