php+js实现弹幕,jQuery实现的弹幕效果完整实例

这篇文章主要介绍了jQuery实现的弹幕效果,结合完整实例形式分析了jQuery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,对于jquery感兴趣的朋友可以参考下本篇文章

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

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

www.php.cn弹幕

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;

}

p.mask{

position:fixed;

width:100%;

height:100%;

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

opacity:0.5;

top:0px;

left:0px;

}

p.bottom{

width:100%;

height:77px;

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

position:fixed;

bottom:0px;

left:0px;

text-align:center;

line-height:77px;

}

p.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;

}

p.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';

}

p.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;

}

p.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(){

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

});

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

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

});

以上就是本篇文章的所有内容，希望本篇文章可以给大家提供到帮助！！

相关推荐：