ホームページ > 記事 > ウェブフロントエンド > ネイティブ JS フェード関数のカプセル化に基づく (IE と互換性あり)
ネイティブ JS フェード関数のカプセル化に基づく (IE と互換性あり)
- 高洛峰オリジナル
- 2016-12-09 15:08:34949ブラウズ
開発プロセス中に、フェードインおよびフェードアウト効果が必要な場合は、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('box');
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['opacity']*100;
}
else{//其他浏览器
opa = getComputedStyle(box,false)['opacity']*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='alpha(opacity:'+(opa+speed)+')';
}
//目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
//设置透明度直接为目标值，同时清除定时器
else{
box.style.opacity=target/100;
box.style.filter='alpha(opacity:'+target+')';
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 ブラウザはそれを作成した後に、次回移動したときの現在の透明度。透明度。それ以外の場合は、初期の不透明度値が取得されます。それはアニメと同じ問題ではないでしょうか？