Home > Article > Web Front-end > A complete example of the barrage effect implemented by jQuery
This article mainly introduces the barrage effect implemented by jQuery. It analyzes the barrage effect by combining jQuery with the time function to control the gradient of input text and style. Friends who are interested in jquery can refer to this article. Article
When watching videos, there will always be some barrages. For this special effect that looks very high, it is actually not difficult to achieve.
The entire code is displayed below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.sbmmt.com弹幕</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>The above is all the content of this article. I hope this article can provide help to everyone! !
Related recommendations:
Example of text line-by-line upward intermittent scrolling effect implemented by jQuery
jQuery uses bind Function implementation to bind multiple events
jQuery automatic or manual image switching implementation method sharing
The above is the detailed content of A complete example of the barrage effect implemented by jQuery. For more information, please follow other related articles on the PHP Chinese website!