0

JavaScriptでツールバーを作っています。このツールバーの通常の高さは 50px です。マウスオーバーすると、高さが 500px に変わります。ただし、このツールバーには、イメージへのピンが少しあります。私の意図は、この画像でツールバーの div の高さを 500px に変更し、そのままにしておくことです。現在、ツールバーのdivを画像で変更できますが、マウスアウトすると元の50pxの高さに戻ります。

ピン画像がクリックされると、画像が再度クリックされるまで onmouseout 機能が停止するようにするにはどうすればよいですか?

それが役立つ場合、これは私のコードです:

//Pin to Image

<img class="pin" onClick = "document.getElementById('toolbar').style.height
= '500px';" src="images/pin.png" width="20px" height="20px" />


//JavaScript for mouseoverevent

$(document).ready(function() {

$("#toolbar").hover(

  //on mouseover
    function() {
       $("#toolbar").animate({
          height: '550'
       }, 'slow');
    },

//on mouseout
   function() {
       $(this).animate({
         height: '-=500px'
       }, 'slow');
    }
    );
});
4

3 に答える 3

1

画像から onclick を削除し、これを追加します。

$('.pin').click(function(){
   $(this).toggleClass('.pinned');
   if(parseInt($('#toolbar').css('height')) < 500) $("#toolbar").animate({
      height: '550'
   }, 'slow');
});

#toolbar ホバー機能を編集します。

$("#toolbar").hover(
    function() {
       // return if its pinned
       if($('#toolbar .pin').hasClass('pinned')) return;
       $("#toolbar").animate({
          height: '550'
       }, 'slow');
    },

   function() {
       // return if its pinned
       if($('#toolbar .pin').hasClass('pinned')) return;
       $(this).animate({
         height: '-=500px'
       }, 'slow');
    }
    );
});

.pinned クラスを使用して、ツールバーの状態を視覚化できるようになりました。

于 2012-12-19T10:13:21.360 に答える
1

次のコードはそのトリックを実行する必要があります（確実に機能するかどうかはテストしていません）。より良い方法で確実に実行できます（おそらくトグルを使用）：

<img class="pin" height="20px" src="images/pin.png" width="20px"/>

//JavaScript for mouseoverevent
$(document).ready(function() {
  var isPinned = false;
  $(".pin").click(function(){
    $("#toolbar").css('height', '500px');
    isPinned = true;
  });


  $("#toolbar").hover(
    //on mouseover
    function() {
      if(!isPinned) {
          $("#toolbar").animate({
            height: '550'
          }, 'slow');
      }
    },

    //on mouseout
    function() {
      if(!isPinned) {
          $(this).animate({
            height: '-=500px'
          }, 'slow');
      }
    }
    );
});
于 2012-12-19T10:14:03.967 に答える
0

ツールバーの状態を格納するフラグ変数を作成します。状態が「固定」の場合に高さの変更をバイパスする条件を mouseout 関数内に記述します。

于 2012-12-19T10:04:57.517 に答える