ネイティブ JS フェード関数のカプセル化に基づく (IE と互換性あり)-jsチュートリアル-php.cn

ネイティブ JS フェード関数のカプセル化に基づく (IE と互換性あり)

高洛峰

リリース： 2016-12-09 15:08:34

オリジナル

997 人が閲覧しました

開発プロセス中に、フェードインおよびフェードアウト効果が必要な場合は、jQuery の fadeTo() メソッドを完全に使用できます。しかし、私たちの目標はそれを使用することだけではなく、プログラムの基礎となるロジックを理解することです。この記事では主にネイティブ JavaScript を使用してフェードインおよびフェードアウト効果を実現します。

枠組みの構築は基本的には難しくありません。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>透明度函数的封装</title>
  <style type="text/css">
   #box{
    width: 200px;
    height: 200px;
    background: red;
    margin: 50px auto;
    opacity: .3;
    filter: alpha(opacity:30);
   }
  </style>
 </head>
 <body>
  <div id="box"></div>
  <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

ログイン後にコピー

JavaScript 部分を書く際の主な困難は、changeOpacity() 関数です。

window.onload = function (){
 var box = document.getElementById(&#39;box&#39;);
 box.onmouseover = function (){
  changeOpacity(this,100);
 }
 box.onmouseout = function (){
  changeOpacity(this,30);
    
 }
}
/**
 *
 * @param {Object} box 要变化透明度的元素
 * @param {Object} target 透明度的目标值（100为最高）
 */
function changeOpacity(box,target){
 var opa;
 var speed;
 if(box.currentStyle){
  //判断浏览器类型，此类型为IE浏览器，即使IE不支持opacity属性，但是仍然可以获取值
  opa = box.currentStyle[&#39;opacity&#39;]*100;
 }
 else{//其他浏览器
  opa = getComputedStyle(box,false)[&#39;opacity&#39;]*100;
 }
 //透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负
 target-opa>=0?speed=1:speed=-1;
 clearInterval(box.timer);
 box.timer = setInterval(function (){
  //目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长
  if(Math.abs(target-opa)>=Math.abs(speed)){
   box.style.opacity=(opa+speed)/100;
   box.style.filter=&#39;alpha(opacity:&#39;+(opa+speed)+&#39;)&#39;;
  }
  //目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
  //设置透明度直接为目标值，同时清除定时器
  else{
   box.style.opacity=target/100;
   box.style.filter=&#39;alpha(opacity:&#39;+target+&#39;)&#39;;
   clearInterval(box.timer);
  }
  //直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度
  opa=opa+speed;
 },30);
}

ログイン後にコピー

この透明度関数の原理は、一般にモーション関数と同じです。 3 つのステップにまとめられます:
1. 現在の値を取得し、ターゲット値と現在の値に基づいてステップサイズを決定します。
2. 毎回 1 つの値を変更するプロセス (グラデーションアニメーションと透明度のステップサイズは次のとおりです)。異なる値、均一なアニメーションと透明度のステップは固定値です)
3. 目標値に到達したかどうかを判断し、到達した場合はタイマーをクリアして終了します。

原理がわからない場合は、JavaScript のユニフォームアニメーションとバッファアニメーションに関する別の記事を読んでください。
原理を理解する際の最大の困難は、現在の透明性を取得することです (割り当ては比較的簡単です)。透明度の値を取得するには、次の 2 つの状況を考慮する必要があります:

1. IE では不透明度属性がサポートされていませんが、同時に box.currentStyle['opacity'] を通じてその値を取得できます。書き込み時に、不透明度の値も css に書き込まれますが、IE は不透明度の値の変更によって透明度を変更しません。
2. 他のブラウザは不透明度属性をサポートしているため、ターゲットの不透明度の書き込みと読み取りのみが比較的簡単です。

次に、IE ブラウザでの操作について詳しく説明します。

まず、CSS ファイルには、操作に役立つ 2 つの属性値があります: opacity: .3; filter: alpha; (opacity:30); フィルター属性で不透明度の値を取得するのは明らかに困難ですが (わかりません!)、currentStyle を使用して不透明度を取得するのは比較的簡単です。そこでテストを行ったところ、IE はこの属性をサポートしていませんが、この属性値の読み書きには問題がないことがわかり、問題は解決しました。 opacity を通じて現在の透明度を読み取り、フィルターを通じて透明度を変更することができます。同時に、opacity の値を変更します (他のブラウザとの互換性のためだけでなく、IE ブラウザはそれを作成した後に、次回移動したときの現在の透明度。透明度。それ以外の場合は、初期の不透明度値が取得されます。それはアニメと同じ問題ではないでしょうか？