JavaScript による簡単な弾幕エフェクトのサンプル分析を実装-jsチュートリアル-php.cn

JavaScript による簡単な弾幕エフェクトのサンプル分析を実装

黄舟

リリース： 2017-05-27 10:26:59

オリジナル

3149 人が閲覧しました

この記事は主に JavaScript弾幕エフェクト

を簡単に実装するのに役立ちます。！
しかし、私は個人的には、テレビを見ているときに集中砲火に邪魔されないことを好みます。今日は簡単な連打を書きます。なんとシンプルなのでしょうか？効果を見てみましょう:

写真からわかるように、私たちの愚かな HTML 構造は確かに非常に単純です。
これは、p、入力ボックス、ボタンで構成されます。

 <p id="box" class="box"></p>
 <input type="text" id="txt" />
 <button onclick="send()">提交内容</button>

ログイン後にコピー

最初にjsコードを投稿します:

 function $(str) {
  return document.getElementById(str);
 }
 function send() {
  var word = $(&#39;txt&#39;).value;
  var span = document.createElement(&#39;span&#39;);
  var top = parseInt(Math.random() * 500) - 20;
  var color1 = parseInt(Math.random() * 256);
  var color2 = parseInt(Math.random() * 256);
  var color3 = parseInt(Math.random() * 256);
  var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
  top = top < 0 ? 0 : top;
  span.style.position = &#39;absolute&#39;;
  span.style.top = top + "px";
  span.style.color = color;
  span.style.left = &#39;500px&#39;;
  span.style.whiteSpace = &#39;nowrap&#39;;
  var nub = (Math.random() * 10) + 1;
  span.setAttribute(&#39;speed&#39;, nub);
  span.speed = nub;
  span.innerHTML = word;
  $(&#39;box&#39;).appendChild(span);
  $(&#39;txt&#39;).value = "";
 }
 setInterval(move, 200);
 function move() {
  var spanArray = $(&#39;box&#39;).children;
  for (var i = 0; i < spanArray.length; i++) {
   spanArray[i].style.left =
    parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
  }
 }

ログイン後にコピー

原理を簡単に説明します:

最初のステップ、入力ボックスのコンテンツを取得する必要があります、var word = $('txt')。値;
第 2 ステップ では、スクロールして表示する p にこのコンテンツを詰め込むためにあらゆる手段を試さなければなりません。 ① ランダムな色 ② ランダムな高さ ③ 左端からの距離が変化します。リアルタイム;
ステップ 3 、このコンテンツを p $('box').appendChild(span);

上記のステップの原理から、2 番目のステップが最も重要なステップであることがわかります。

最初の原則を実装します:

 var color1 = parseInt(Math.random() * 256);
 var color2 = parseInt(Math.random() * 256);
 var color3 = parseInt(Math.random() * 256);
 var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
 span.style.color = color;

ログイン後にコピー

小さな拡張:

RGB(R,G,B);

R:
赤色の値。正の
整数 | パーセントG:
緑色の値。正の整数 | パーセント
B:
青色の値。正の整数 | パーセント
これは理解しやすいはずです。

2 番目の原則を実装するには:

var top = parseInt(Math.random() * 500) - 20;
top = top < 0 ? 0 : top;
span.style.top = top + "px";

ログイン後にコピー

3 番目の原則を実装するには:

 span.style.left = &#39;500px&#39;;
 setInterval(move, 200);
 function move() {
  var spanArray = $(&#39;box&#39;).children;
  for (var i = 0; i < spanArray.length; i++) {
   spanArray[i].style.left =
    parseInt(spanArray[i].style.left) - spanArray[i].speed + &#39;px&#39;;
  }
 }

ログイン後にコピー

は、

timer の原則を使用して、左の値をリアルタイムで変更することです。

この時点で、それは非常に明確になっているはずです。

以上がJavaScript による簡単な弾幕エフェクトのサンプル分析を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。