JavaScript は、フェードインおよびフェードアウト効果の関数テストのサンプルコードをネイティブにカプセル化します。-jsチュートリアル-php.cn

JavaScript は、フェードインおよびフェードアウト効果の関数テストのサンプルコードをネイティブにカプセル化します。

亚连

リリース： 2018-05-29 14:33:25

オリジナル

2923 人が閲覧しました

この記事では、主にフェードインおよびフェードアウト効果のJavaScriptネイティブカプセル化の機能を紹介します。主に、FadeInフェードイン関数とFadeOutフェードアウト関数があります。必要な場合は、それを参照してください。 js のグラデーション表示と消滅というと、ほとんどの人は jQuery()、fadeOut()、または fadeToggle() を思い浮かべるでしょう。しかし、そのような効果を導入するためだけに巨大な JQuery ライブラリが呼び出された場合はどうなるでしょうか?つまり、ネイティブ js を使用していくつかの機能を実装することで自分自身を改善しました~

そこで、純粋な js コードでフェードインとフェードアウトを記述する効果を簡単に調べました。

間違いがある場合は、私自身の間違いを修正できるようにコメントで指摘してください

(1) FadeIn フェードイン機能フェードインとフェードアウト効果は実際には setInterval() です。追加この効果は、前のループの DOM 操作を通じて要素オブジェクトノードの透明度を変更することで実現できます。

そこで、setInterval()、不透明度、速度という 2 つの必要なものを抽出します。

html:

<p id="p1"></p>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

ログイン後にコピー

css style

<style>
 p {
  width: 100px;
  height: 100px;
  background-color: #1d7db1;
  opacity:0;
 }
 </style>

ログイン後にコピー

まず第一に、fadeIn関数の最初のバージョンの書き方を見てみましょう: まず実装のアイデアを理解してください

function fadeIn(ele, speed) {
  let num = 0;
  let time = setInterval(() => {
    num += speed;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time); // 清楚定时器
    }
  }, 30);
  }
}

ログイン後にコピー

この効果が一時的に実現されると、いくつかのことが起こりますはそれほど単純ではありません。複数のトリガー効果が発生した場合、setInterval が同時に複数回使用されることになり、いくつかの厄介な BUG が発生します。

この問題を解決するには、現在、グローバル状態を追加して setInterval が複数回トリガーされないようにするという解決策があります。

rreee

互換性の問題! ！！

最初にコードを見てください

let Fadeflag = true;
function fadeIn(ele, speed) {
  let num = 0;
  if (Fadeflag) {
  let time = setInterval(() => {
    num += speed;
    Fadeflag = false;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time);
     Fadeflag = true;
    }
  }, 30);
  }
}

ログイン後にコピー

注: ff および GG と互換性を持たせるための標準として ie を使用しているため、コードは num/100 を設定します

js で DOM ノードの透明度を設定する関数属性: filter= "alpha( opacity=" + value+ " )" (ieと互換性があります)

ieのフィルタ範囲は0~100です

opacity=value/100 (FFおよびGGと互換性があります)。

FFとGGの不透明度は0~1です(ieのフィルタ範囲と互換性を持たせるため、num/100を使用します)

(2)フェードアウト関数 speed:ここで不透明度の値を 1 から設定します。 float 値は速度を 0 に変更します (互換性を考慮することを忘れないでください)

フェードアウトロジック: 不透明度の値は 1 から 0 float 値に変更されます。

カプセル化関数

set: function(elem, num) {
  elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
}

ログイン後にコピー

テスト例:

(function() {
  let fadeFlag = true;
  function Fade(selector) {
    this.elem = typeof selector == &#39;Object&#39; ? selector : document.getElementById(selector);
  }
  Fade.prototype = {
   constructor: Fade,
    setOpacity: (elem, opacity) => { // 兼容ie10—
      elem.filters ? elem.style.filter = &#39;alpha(opacity = &#39;+ opacity +&#39;)&#39;:  elem.style.opacity = opacity / 100;
      return true;
   },
   setOpacity: function(num) {
      this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
   },
    fadeIn: function(speed, opacity){
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
      */
      speed = speed || 2;
      opacity = opacity || 100;
      let num = 0; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num += speed;
          fadeFlag = false;
          this.setOpacity(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          if (num >= opacity) {
            clearInterval(time);
            fadeFlag = true;
          }
        }, 20);
      }
    },
    fadeOut: function(speed, opacity) {
   /*
   speed ==>淡入的速度，正整数（可选）;
   opacity ==>淡入到指定的透明度，0～100（可选）;
   */
      speed = speed || 2;
      opacity = opacity || 0;
      let num = 100; // 初始化透明度变化值为0
      if (fadeFlag) {
        let time = setInterval(() => {
          num -= speed;
          fadeFlag = false;
          this.set(num);
          this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = &#39;alpha(opacity = &#39;+ num +&#39;)&#39;;
          if (num <= opacity) {
          clearInterval(time);
          fadeFlag = true;
          }
        }, 20);
      }
    }
  };
window.Fade = Fade;
})();

ログイン後にコピー

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

5つの一般的なJavaScript関数

Angular学習メモ - サードパーティのUIフレームワークとコントロールの統合の例

登録メールアクティベーション機能を実装するNode.jsメソッドの例

以上がJavaScript は、フェードインおよびフェードアウト効果の関数テストのサンプルコードをネイティブにカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。