ホームページ > 記事 > ウェブフロントエンド > jQueryで実装した弾幕エフェクトの詳細例

jQueryで実装した弾幕エフェクトの詳細例

小云云オリジナル: 2017-12-29 10:31:501518ブラウズ

弾幕はとても楽しい体験です。この記事では、jQuery によって実装された弾幕エフェクトを主に紹介し、入力テキストとスタイルのグラデーションを制御する time 関数を組み合わせることによって jQuery がどのように弾幕エフェクトを実現するかを完全な例の形式で分析します。友達が必要な場合は、以下を参照してください。

ビデオを見ていると、常にいくつかの集中砲火が発生しますが、非常にハイエンドに見えるこの特殊効果を実現するのは、実際には難しくありません。

コード全体を以下に示します:

<!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>

学習しましたか?急いで試してみてください。

jQueryで実装した弾幕エフェクトの詳細例

関連記事