Heim > Artikel > Web-Frontend > Detailliertes Beispiel für den von jQuery implementierten Sperreffekt
Detailliertes Beispiel für den von jQuery implementierten Sperreffekt
- 小云云Original
- 2017-12-29 10:31:501472Durchsuche
Barrage ist eine sehr unterhaltsame Erfahrung. In diesem Artikel wird hauptsächlich der von jQuery implementierte Barrage-Effekt mit einem vollständigen Beispiel zur Steuerung des Eingabetexts und des Stils durch die Kombination von Zeitfunktionen vorgestellt Es kann als Referenz dienen.
Beim Ansehen von Videos wird es immer einige Sperrfeuer geben. Für diesen besonderen Effekt, der sehr hoch aussieht, ist er eigentlich nicht schwer zu erreichen.
Der gesamte Code wird unten angezeigt:
<!doctype html>
<html>
<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>弹幕技术</button>
<p>
<a href="#" rel="external nofollow" rel="external nofollow">X</a>
</p>
<!-- 底部发言框前端 -->
<p>
<input></input>
<a href="#" rel="external nofollow" rel="external nofollow">发表言论</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>"+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>Haben Sie ihn gelernt? Beeilen Sie sich und probieren Sie es aus.
Verwandte Empfehlungen:
Detaillierte Beispiele für die CSS3-Implementierung von Barrage
Code-Implementierung von Barrage im WeChat-Miniprogramm
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für den von jQuery implementierten Sperreffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!