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:501515Durchsuche

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:&#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>

Haben Sie ihn gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Detaillierte Beispiele für die CSS3-Implementierung von Barrage

HTML5-Text-Barrage-Effekt

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel für die Kombination von jQuery UI Draggable + SortableNächster Artikel：Detailliertes Beispiel für die Kombination von jQuery UI Draggable + Sortable

In Verbindung stehende Artikel

Mehr sehen