Dieser Artikel stellt hauptsächlich den von jQuery implementierten Sperreffekt vor, indem er jQuery mit einer Zeitfunktion kombiniert, um den Gradienten von Eingabetext und -stil zu steuern 🎜>
Beim Ansehen von Videos wird es immer einige Überraschungen geben. Dieser Spezialeffekt, der sehr hochwertig aussieht, ist eigentlich nicht schwer zu erzielen. Der gesamte Code wird unten angezeigt:
<!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>Beispiel für einen zeilenweisen, intermittierenden Bildlaufeffekt nach oben, implementiert durch jQuery
jQuery verwendet die Bindungsfunktionsimplementierung, um mehrere Ereignisse zu binden
JQuery automatische oder manuelle Bildwechsel-Implementierungsmethodenfreigabe
Das obige ist der detaillierte Inhalt vonEin vollständiges Beispiel für den von jQuery implementierten Sperreffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
