誰もがブラインドを見ました！写真に示されているように：
原理：
図に示されているように、中空の格子は各Liに似ています。それの相対的な位置決め属性を設定し、オーバーフローを設定します：非表示。黒いブロックは、Liの高さのLi子要素であり、Liの2倍の高さで、絶対属性を設定します。変化を得るために、その最高値を変更したいと考えています！ （右上隅の余分なブロックは、この写真とは何の関係もありません）
レイアウト分析：
トップは変更する価値があることに注意してください！デフォルトのTOP = 0が0の場合、「2階の1階」が表示されます。 TOP = -40pxの場合、Liの子要素は40pxまで移動します。この時点で、表示されているコンテンツは「1階の階下」です。 P-Element Layer Divに注意してください
JS分析：
1.複数のタイマーをオンにして、効果を達成します
2。反対方向に実行します
3.複数のエクササイズセットを実行します
4.蓄積は驚異的な感覚を生み出します
5.時間間隔アニメーションを生成します
JSコードは次のとおりです。
<script> window.onload = function（）{var oul = document.getElementById（ 'ul1'）; var oul2 = document.getElementById（ 'ul2'）; TOSHOW（OL）; // settimeout（function（）{toshow（oul2）;}、4000）を実行します。 function toshow（obj）{var adiv = obj.getelementsbytagname（ 'div'）; var inow = 0; varタイマー= null; var bbtn = true; setInterval（function（）{tochange（）;}、2000）; function tochange（）{timer = setInterval（function（）{if（inow == adiv.length）{clearinterval（timer）; inow = 0; bbtn =！bbtn;} else if（bbtn）{adiv [inow]、{top：0}、function（）{var p = documentelementsbybyclassame（ 'p = documentsybybyclassame（' p-document） i <length; i ++）{p [i]。 }}}}; //モーションフレーム関数StartMove（obj、json、endfn）{clearinterval（obj.timer）; obj.timer = setInterval（function（）{var bbtn = true; for（var attr in json）{var icur = 0; icur = parseint（obj、attr））|| 0; var ispeed =（json [attr] -icur）/8; ispeed> 0？ if（aTTR]）{bbtn = false; } // get nonlineスタイル関数getStyle（obj、attr）{if（obj.currentstyle）{return obj.currentstyle [attr]; } else {return getComputedStyle（obj、false）[attr]; }} </script>アドレスをダウンロード：jsにブラインドを達成します
上記はこの記事に関するものであり、JSブラインドの効果を実現することを誰もが学ぶことが役立つことを願っています。