まず最初に言いたいのは、私がそうであり、これらの記事は私と同じように学びたい人に捧げられているということです。フォーラムの何人かの友人がバッファリング効果について投稿していますが、私にとって彼らのコードを読むのは本当に苦痛です。同じレベルではないので、このエフェクトを理解してもらえるように最も冗長なコードを使用しています。最後に、この言葉を信じてください。
いつかあなたもマスターになれますよ(頑張ればね(笑))
コードボックスを実行
[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更してから、[実行] を押すことができます]
次の 2 つのキー コードを見てください:
function f_s(){
var obj=document.getElementById("box");//ID を持つオブジェクトを取得 box
obj.style.display="block";// 表示するオブジェクト obj を設定します
obj.style.width="1px"; //オブジェクトobjの幅を1pxに設定します。
var changeW=function(){ //(関数について、どのクロージャ、どのクラス、プロトタイプか、頭が大きくなりますので、今後ゆっくり理解していきます。ここで理解しているのは、直接測定する関数を作成して、 put 変数changeWに格納されます)
var obj_w=parseInt(obj.style.width);//オブジェクトの幅を数値に変換し、変数obj_wに格納します。
if(obj_w<600){ //幅の値が 600 未満かどうかを判定
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//オブジェクトの幅を計算します。 。 。幅が長くなるほど増分は小さくなります
}
それ以外{
clearInterval(bw);//600 以上の場合、setInterval は実行されなくなり、この時点で幅の増加が停止することを意味します。
}
}
var bw=window.setInterval(changeW,1)//0.001秒ごとにchangeWを呼び出します
}
//低速から高速へ、低速から高速へ
// 関数 s_f() を宣言する
関数 s_f(){
var obj=document.getElementById("box2");
var e_add=1;//初期化増分
obj.style.display="ブロック";
obj.style.width="1px";
varchangeW=function(){//私が理解しているのは、関数リテラルを作成し、それを変数changeWに格納することです
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//後続の各増分の値は
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//幅が長くなるほど増分が大きくなる
}
それ以外{
クリア間隔(bw);
obj.style.width="600px";//(obj_w+e_add) この計算方法は事前定義された幅を超えるため、バッファリング後に幅がリセットされます。これは錯覚を引き起こします (笑)。
}
}
var bw=window.setInterval(changeW,1)
}
