1

Javascript スライド メニューを開いたままにします。clearTimeout が期待どおりに機能しない - 助けてください

<html>
<head>
<style>
#Menu1 {position:absolute;
 top:-190px; left:150px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu2 {position:absolute;
 top:-190px; left:580px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }
#Menu3 {position:absolute;
 top:-190px; left:1005px;
 font-size:15px;visibility:visible;
 background-color:#D0BCFE;
 width:114px;z-index:0;border-style:solid;
 }

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
</style>
<script>

var stopUp=null;
var stopDown=null;
var mov=-143;
var on;

function down(id){

    if (!on){
       on=true;
       clearTimeout(stopUp)
       stopUp=null;
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov <=27){
       mov+=2;
       stopDown=setTimeout(function (){ down(id) }, 20)
    }
}

function up(id){

    if (on){
       on=false;
       clearTimeout(stopDown)
       stopDown=null; 
    }

    var obj=document.getElementById(id)
    obj.style.top=mov +"px";
    if (mov >=-143){
       mov-=2;
       stopUp=setTimeout(function(){ up(id)}, 20);
    }

}


</script>

</head>

<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>


<div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')">
URL 1<br>
URL 2<br>
URL 3<br>
URL 4<br>
URL 5<br>
URL 6<br>
URL 7<br>
URL 8<br>
</div>
</div>

<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%>
<TBODY>
<TR>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span>
</TD>
</TR>
</TBODY>
</TABLE>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<html>
<head>

編集: テストしたところ、単一のメニューにカーソルを合わせると機能しましたが、マウスをいくつかのメニューにすばやく移動すると、最初のメニューは機能しましたが、他のメニューも停止しました。

Menu1 {位置:絶対;

top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

Menu2 {位置:絶対;

top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

Menu3 {位置:絶対;

top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}

var stopUp=null; var stopDown=null; var mov=-143; var on; 関数 down(id){ if (!on){ on=true; clearTimeout(stopUp) stopUp=null; var obj=document.getElementById(id) obj.style.top=mov +"px"; } if (mov =-143){ mov-=2; stopUp=setTimeout(function(){ up(id)}, 20); } }

URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8

メニュー 1 メニュー 2 メニュー 3

4

2 に答える 2

2

あなた<div>のバランスが取れていません。</div>開始 1 つごとに2 つの終了s があります。

于 2011-01-05T20:13:36.043 に答える
1

タイムアウトをクリアしてもオブジェクトの位置はリセットされません。変数movが共有されているため、遷移中に問題のある操作が発生します。移動される新しい要素がそれに応じて整列されていなくても、「最後の」移動値を取得します。

考えられる修正:

  1. 常に CSS 値からアイテムの位置を取得します。これにより、アイテムごとの位置が保持されます (これは、jQuery のアニメーションのしくみでもあります)。

  2. 位置を維持するアイテムの移動ごとにルックアップ (またはバインディング) を維持します。ただし、前者の方が簡単なので、前者を使用します。次の部分 (タイマー ID の維持) では、#2 が使用されます:-)

さらに、操作が完了するまでタイマーを実行し続ける必要があります(遷移が発生しただけではありません)。つまり、 sharedstopUpとstopDownvalues は、上記の shared と同様の問題を引き起こしmovます。(これは、jQuery アニメーション キューで透過的に処理されます)。ただし、上記の #1 はここではうまく機能しません。それでは、#2をクロージャー バインディングと共に使用してみましょう。これには、クリック イベントがコードに添付されている必要があります。

function addFlyout (elm) {
   var timerId
   elm.onmouseover = function () {
      // now can use timerId and it will only be accessible
      // to things within *this* invocation of addFlyout, including
      // inside here.
      timerId = setTimeout(function () {
         ...
         if (needToDoMore) {
           // it's easy to reference the anonymous function inside
           // with arguments.callee. alternatively, setInterval could be used
           timerId = setTimeout(arguments.callee, ...)
         }
      }, ...);
   }
   elm.onmouseout = function () {
      // ditto
   }
}
...
addFlyout(document.getElementById("Menu1"))

Jibbering JS Closure Notesには、多くの有用な情報が含まれています。このアプローチは にも使用できますmovが、上記のように、その場合は常に現在の CSS 値を取得する方が簡単だと思います。

また、マークアップを確認し (他のブラウザのナンセンスを回避します)、onmouseover/out の問題に注意してください。移動した要素がマウス イベントを処理する要素の上に移動 (または形状を変更) すると、トリガーされるイベントに問題が発生する可能性があります。または逃した。

jQuery (または同様のクロスブラウザー フレームワーク) を使用すると、コードを簡素化し、上記のケースを簡単に処理できます。(jQuery にはアニメーション機能も組み込まれています!)

jQuery (事前に作成されたシステムを使用しない場合) は、次のようになります。

// get all elements to apply animation to
var elements = $("#Menu1").add("#Menu2").add("#Menu3")
elements.hover(function () { // over
  $(this).stop().animate({top: 140})
}, function () { // out
  $(this).stop().animate({top: 0})
})

私がお勧めするものを推測してください:-)

ハッピーコーディング。

于 2011-01-05T20:19:43.427 に答える