Maison > interface Web > js tutoriel > Exemple détaillé de l'effet de barrage implémenté par jQuery

Exemple détaillé de l'effet de barrage implémenté par jQuery

小云云
Libérer: 2017-12-29 10:31:50
original
1547 Les gens l'ont consulté

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>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:&#39;Microsoft Yahei&#39;; 
  } 
  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:&#39;Microsoft Yahei&#39;; 
    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(); 
  }) 
  }); 
  $(&#39;.button&#39;).click(function(){ 
      $(&#39;p.mask&#39;).fadeOut(500); 
    }); 
    $(".danmu").click(function(){ 
     $(&#39;p.mask&#39;).fadeIn(500); 
  }); 
</script> 
</body> 
</html>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal