ホームページ >ウェブフロントエンド >jsチュートリアル >バッファリングされたコンテンツの縮小および展開エフェクト_ナビゲーション メニュー
バッファリングされたコンテンツの縮小および展開エフェクト_ナビゲーション メニュー
- WBOYオリジナル
- 2016-05-16 19:08:42996ブラウズ
ie5.5 と firefox2.0 と互換性があります (私はこの 2 つのブラウザしか持っていないので、それらでのみテストしました)
blueidea の多くの友人がコンテンツの縮小と拡大の効果を投稿しているのを見ました。違いはバッファリング効果です。実行してみればわかります (笑)
興味のある友人が解決策を教えてくれます。
このコードの他の部分は、更新や改善後にリリースされません。カプセル化する必要がある場合は、自分で実行してください。
コードは共有と学習のためにリリースされます。他の人の作品を尊重し、商業目的で使用しないでください。!!!
コードをコピーします コードは次のとおりです。 🎜>
<script> <br>/* <br>By Auntion <br>QQ 82874972 <br>JavaScript と ajax QQ が好きな人は歓迎です、一緒に進歩しましょう、笑<br>使用方法<br>呼び出し効果: Effect(1,2) <br> 1 : 変更されるオブジェクトの ID <br> 2 : コントロールコンテナの ID Use: this.parentNode.id で (親タグの ID) を取得できます。<br><br>*/ <br>関数 $G( Read_Id) { return document.getElementById(Read_Id) } <br>function Effect(ObjectId,parentId){ <br> if ($G(ObjectId).style.display == 'none'){ <br> Start(ObjectId, '開く'); <br> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','"parentId "');>閉じる</a>" <br> }else{ <br> Start (ObjectId,'Close'); <br> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','" parentId "');>Open< /a>" <br> } <br>} <br>function Start(ObjId,method){ <br>var BoxHeight = $G(ObjId).offsetHeight;オブジェクトの最小の高さ<br>var MaxHeight = 130;オブジェクトの最大の高さ <br>var BoxAddMax = 1; 🎜>var Every_Add = 0.15; 値が大きいほど高速になります。スピード]<br> var Reduce = (BoxAddMax - Every_Add); <br>var Add = (BoxAddMax Every_Add) <br>if (method == "Close"){ <br> var Alter_Close = function(){ // 仮想 [減少] を構築します] ループ <br> BoxAddMax /= Reduce; <br> BoxHeight -= BoxAddMax; <br> $G (ObjId).style.display = "none"; window.clearInterval(BoxAction); <br> } <br> else $G(ObjId).style.height = BoxHeight; <br>var BoxAction = window.setInterval(Alter_Close,1); <br>else if (method == "Opens"){ <br>var Alter_Opens = function(){ //仮想 [増分] ループを構築します<br> BoxAddMax *= Add; <br> BoxHeight = BoxAddMax; > if (BoxHeight >= MaxHeight){ <br> $G(ObjId).style.height = MaxHeight; <br> window.clear Interval(BoxAction) ; <br> $G(ObjId) .style.display= "ブロック"; <br> $G(ObjId).style.height = BoxHeight; <br> } <br>} <br> var BoxAction = window.setInterval(Alter_Opens,1); } <br>} <br></script>
<script> <br>/* <br>By Auntion <br>QQ 82874972 <br>JavaScript と ajax QQ が好きな人は歓迎です、一緒に進歩しましょう、笑<br>使用方法<br>呼び出し効果: Effect(1,2) <br> 1 : 変更されるオブジェクトの ID <br> 2 : コントロールコンテナの ID Use: this.parentNode.id で (親タグの ID) を取得できます。<br><br>*/ <br>関数 $G( Read_Id) { return document.getElementById(Read_Id) } <br>function Effect(ObjectId,parentId){ <br> if ($G(ObjectId).style.display == 'none'){ <br> Start(ObjectId, '開く'); <br> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','"parentId "');>閉じる</a>" <br> }else{ <br> Start (ObjectId,'Close'); <br> $G(parentId).innerHTML = "<a href=# onClick=javascript:Effect('" ObjectId "','" parentId "');>Open< /a>" <br> } <br>} <br>function Start(ObjId,method){ <br>var BoxHeight = $G(ObjId).offsetHeight;オブジェクトの最小の高さ<br>var MaxHeight = 130;オブジェクトの最大の高さ <br>var BoxAddMax = 1; 🎜>var Every_Add = 0.15; 値が大きいほど高速になります。スピード]<br> var Reduce = (BoxAddMax - Every_Add); <br>var Add = (BoxAddMax Every_Add) <br>if (method == "Close"){ <br> var Alter_Close = function(){ // 仮想 [減少] を構築します] ループ <br> BoxAddMax /= Reduce; <br> BoxHeight -= BoxAddMax; <br> $G (ObjId).style.display = "none"; window.clearInterval(BoxAction); <br> } <br> else $G(ObjId).style.height = BoxHeight; <br>var BoxAction = window.setInterval(Alter_Close,1); <br>else if (method == "Opens"){ <br>var Alter_Opens = function(){ //仮想 [増分] ループを構築します<br> BoxAddMax *= Add; <br> BoxHeight = BoxAddMax; > if (BoxHeight >= MaxHeight){ <br> $G(ObjId).style.height = MaxHeight; <br> window.clear Interval(BoxAction) ; <br> $G(ObjId) .style.display= "ブロック"; <br> $G(ObjId).style.height = BoxHeight; <br> } <br>} <br> var BoxAction = window.setInterval(Alter_Opens,1); } <br>} <br></script>
| これ 里 です 第 二 很 正 常 |