JavaScriptとCSSの復習(2)_javascriptスキル-jsチュートリアル-php.cn

JavaScriptとCSSの復習(2)_javascriptスキル

WBOY

リリース： 2016-05-16 18:24:23

オリジナル

855 人が閲覧しました

Visibility: 通常のフローでの位置とスペースを維持しながら、要素の表示/非表示を切り替えます。これには、表示 (デフォルト) と非表示 (非表示) の 2 つの値があります。
例:

コードをコピーコードは次のとおりです。

こんにちは ジョン、今日は元気ですか?

ブラウザは次のとおりです: こんにちは、ジョン、お元気ですか?今日は? 次に、John の b の可視性を非表示に設定すると、次のようになります。
こんにちは、今日はどうですか?
表示: 要素のレイアウトを制御するための豊富な選択肢が提供されます。インライン、ブロック、またはなし (要素がドキュメントから完全に非表示になり、要素がドキュメントから削除された場合と同じ外観になります) にすることができます。上記の例でも、display:none を使用した場合です。その結果は次のようになります。
こんにちは、今日はどうですか?
以下は、要素を表示および非表示にするための本にある 2 つの簡単な関数です

コードをコピーしますコードは次のとおりです:

//表示を使用して要素を非表示にします
function Hide(elem) { 
//要素の現在の状態を確認します表示
var curDisplay = getStyle (elem, 'display'); 
//その表示ステータスを記録します
if(curDisplay != 'none') 
elem.$oldDisplay = curDisplay; display to none 
elem.style.display = 'none' 
} 
//display を使用して要素を表示します
function show(elem) { 
//display 属性をその値に設定します元の値
 elem.style.display = elem.$oldDisplay || ' '; 
} 

 

次に、要素に非常にクールな効果を追加できる透明度を調べてみましょう。 ...要素の透明度を設定する以下の関数を見てください。

コードをコピーコードは次のとおりです:

//要素の透明度を設定します (0 からのレベル) -100)

function setOpacity(elem, level) { 
//filters 属性が存在する場合、IE 
if(elem.filters) { 
elem.style.filters = 'alpha( opacity=' level ')'; 
} else { // それ以外の場合は、W3C の不透明度属性を使用します 
elem.style.opacity = level / 100; 

 
はい 要素の位置、サイズ、可視性を調整するこれらの方法を使用して、それらを組み合わせてアニメーションを作成できます。 

コードをコピーコードは次のとおりです。function slideDown(elem) { //Start from 0 height Slide

elem.style.height = '0px';

// 最初に要素を表示します (ただし、高さが 0 なので表示されません) 
show(elem); >//要素の潜在的な最大の高さを検索します 
var h = fullHeight(elem) 
//1 秒で 20 フレームのアニメーションを実行します 
for(var i = 0; i < = 100; i = 5) { 
//正しい 'i' を維持できることを保証するクロージャー関数 
(function() { 
var pos = i; 
//タイムアウトを設定する指定された時点で移動できるようにします
setTimeout(function() { 
//要素の新しい高さを設定します
elem.style.height = (pos / 100) * h 'px' ; 
}, (pos 1) * 10); 
})() 
} 
} 

 
理解するのが難しいので、詳しく知りたい場合は、Google にアクセスしてください。ここでは説明しません。 
次に、setOpacity 関数を使用して「フェードイン」関数を作成します。 

コードをコピーします

コードは次のとおりです。 :function fadeIn(elem) { //透明度 0 から開始setOpacity(elem, 0);

//最初に要素を表示します (ただし、要素は表示されません)透明度は 0)

show(elem); 
//20 フレームのアニメーションを 1 秒で実行します 
for(var i = 0; i //正しい 'i' を維持できるクロージャ関数を保証します
(function(){ 
var pos = i; 
//指定されたイベント内で実行できるようにタイムアウトを設定します
setTimeout(function () { 
setOpacity(elem, pos); 
}, (pos 1) * 10) 
})(); 🎜> 
コードの正確性を保証するために、本にいくつかの小さな誤りを見つけたので、コードを書いた後にテストしました。上記の slideDown メソッドのテストが完了したので、var h = fullHeight(elem); を置く必要があります。そうしないと効果がありません。
後半の復習はここまでです。急いで何かを学ばないよう、ゆっくりと理解してください。