jQuery实现的弹幕效果完整实例
程序员文章站
2022-05-03 15:28:16
...
这篇文章主要介绍了jQuery实现的弹幕效果,结合完整实例形式分析了jQuery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,对于jquery感兴趣的朋友可以参考下本篇文章
看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。
下面将整个代码显示出来：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.php.cn弹幕</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<button class="danmu">弹幕技术</button>
<p class="mask">
<a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
</p>
<!-- 底部发言框前端 -->
<p class="bottom">
<input class="content"></input>
<a href="#" rel="external nofollow" rel="external nofollow" class="send">发表言论</a>
</p>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$("a.send").click(function(){
var val=$(".content").val();
var content=$("<p class='text'>"+val+"</p>");
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);
});
</script>
</body>
</html>
以上就是本篇文章的所有内容，希望本篇文章可以给大家提供到帮助！！
相关推荐：
以上就是jQuery实现的弹幕效果完整实例的详细内容，更多请关注其它相关文章！