Maison > Article > interface Web > Exemple détaillé de l'effet de barrage implémenté par jQuery
Exemple détaillé de l'effet de barrage implémenté par jQuery
- 小云云original
- 2017-12-29 10:31:501473parcourir
Barrage est une expérience très amusante. Cet article présente principalement l'effet de barrage implémenté par jQuery. Il analyse l'effet de barrage en combinant jQuery avec un exemple complet pour contrôler le dégradé du texte et du style d'entrée en combinant les fonctions temporelles. il peut pour référence.
En regardant des vidéos, il y aura toujours des barrages. Pour cet effet spécial qui semble très élevé, ce n'est en fait pas difficile à réaliser.
Le code complet est présenté ci-dessous :
<!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>L'avez-vous appris ? Dépêchez-vous et essayez-le.
Recommandations associées :
Exemples détaillés d'implémentation CSS3 du barrage
Effet de barrage de texte HTML5
Implémentation du code du barrage dans le mini-programme WeChat
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!