2

HTML:

<ul class="clients">
 <li>
  <div class="over left">Description</div>
  <div class="inner">Image</div>
 </li>
</ul>

CSS:

.clients { margin-right: -20px; }
 .clients li {
  float: left;
  width: 128px;
  height: 120px;
  margin: 0 20px 20px 0;
  border: 1px solid #c2c2c2;
 }
  .clients .over {
   display: none;
   position: absolute;
   width: 250px;
   font-size: 11px;
   line-height: 16px;
   background: #ecf5fb;
   margin: 3px 0 0 3px;
   padding: 18px;
   z-index: 25;
  }
   .clients .right { margin: 3px 0 0 -161px; }
  .clients .inner { width: 128px; height: 120px; overflow: hidden; }

したがって、フロートされた正方形のリストと、それぞれに絶対位置を持つポップアップ ブロックがあります。

JS:

jQuery(function($) {
 $(".clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()});
});

オーバーした場合 - 表示、そうでない場合 - 非表示。まったく問題ありませんが、もっと高度にする必要があります。オフセットをキャッチして、クラスを.overブロックに与える必要があります。

  • 右 (ブラウザ ウィンドウの隅) からのオフセットが 150px未満の場合は、ブロックにクラス "right" を追加.overします。
  • 右からのオフセットが 150px を超える場合 -ブロックのクラス「左」を追加し.overます。

どうすればそれができますか？

4

1 に答える 1

2

.offset()のようなオブジェクトを返します{ left: 200, top: 300 }

$(window).width()ウィンドウの幅を返します

明らかに、 から左オフセット ストレートを取得し.offset()ます。条件を作成するために必要な正しいオフセットは、次のように計算する必要があります。

offsetRight=$(window).width()-$(this).width()-$(this).offset().left;

すべて一緒に:

jQuery(function($) {
 $(".clients li").bind('mouseover mouseout',function(){
   $over=$("div.over",this);
   $over.toggle();
   //didn't get if it's the li's offset you need or the actual .over, replace $(this) with $over in next lines if you need that
   offset=$(this).offset();
   offsetRight=$(window).width()-$(this).width()-offset.left;
   if (offsetRight<150){ $over.removeClass('left').addClass('right'); }
   else { $over.removeClass('right').addClass('left'); }
 });
});
于 2010-04-19T13:01:10.530 に答える