弾幕効果を実現するためのjQuery

この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>土坎弾幕</title>
    
    <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
    <スタイル>
            html、本文{
      マージン: 0px;
      パディング: 0px;
      幅: 100%;
      高さ: 100%;
      フォントファミリ: "Microsoft YaHei";
      フォントサイズ: 62.5%;
    }
    
    .boxDom {
      幅: 100%;
      高さ: 100%;
      位置: 相対的;
      オーバーフロー: 非表示;
    }
    
    .idDom{
      幅: 100%;
      高さ: 100px;
      背景: #666;
      位置: 固定;
      下: 0px;
    }
    
    。コンテンツ {
      表示: インラインブロック;
      幅: 430ピクセル;
      高さ: 40px;
      位置: 絶対;
      左: 0px;
      右: 0px;
      上: 0px;
      下: 0px;
      マージン: 自動;
    }
    
    。タイトル {
      表示: インライン;
      フォントサイズ: 4em;
      垂直方向の位置合わせ: 下;
      色: #fff;
    }
    
    。文章 {
      境界線: なし;
      幅: 300ピクセル;
      高さ: 30px;
      境界線の半径: 5px;
      フォントサイズ: 2.4em;
    }
    
    .btn{
      幅: 60ピクセル;
      高さ: 30px;
      背景: #f90000;
      境界線: なし;
      色: #fff;
      フォントサイズ: 2.4em;
    }
    
    スパン {
      幅: 300ピクセル;
      高さ: 40px;
      位置: 絶対;
      オーバーフロー: 非表示;
      色: #000;
      フォントサイズ: 4em;
      行の高さ: 1.5em;
      カーソル: ポインタ;
      空白: ラップなし;
    }
    </スタイル> 
</head> 
   
<本文>
    
<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">コメント:</p>
      <input type="text" class="text" id="text"/>
      <button type="button" class="btn" id="btn">起動</button>
    </div>
  </div>
</div>
 
<スクリプト>
   
  
  $(関数() {
    
      // 異なる色のイベント箇条書き画面フォントを登録します var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(関数() {
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//スパンを作成
        .text($("#text").val())//コンテンツを設定します。css("color", colors[randomColor])//フォントの色を設定します。css("left", "1400px")//左の値を設定します。css("top", randomY)//上の値を設定します。animate({left: -500}, 10000, "linear", function () {
          // 終了ポイントに到達したら、$(this).remove() を削除する必要があります。
        })// animation.appendTo("#boxDom"); を追加します。
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(関数(e) {
      (e.keyCode == 13)の場合{
        $("#btn").click();
      }
    });
    
  });
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: