jQuery检查偏移量

HTML:

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

.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; }

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

所以，我们有一个浮动方块列表，每个方块中都有一个弹出方块，它们有绝对位置

JS:

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

.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; }

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

如果过度显示，否则隐藏。很好，但它必须更高级，我们应该捕获一个偏移量并为指定一个类

• 如果从右侧（浏览器窗口的一角）的偏移小于150px，则为

  .over

  块添加类“right”
• 如果从右的偏移量大于150px-则为

  上的
  块添加类“left”

我们怎么做呢？

.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'); }
 });
});

jQuery（函数（$）{
$（“.clients li”）.bind（'mouseover mouseout'，function（）{
$over=$（“div.over”，this）；
$over.toggle（）；
//没有得到您需要的li偏移量还是实际的。结束，如果需要，请在下一行中将$（此）替换为$结束
偏移量=$（this.offset（）；
offsetRight=$（窗口）.width（）-$（此）.width（）-offset.left；
if（offsetRights）您能给出一个完整的函数吗？带有“if”“else”等（如果右偏移小于150px，则为.over块添加类“right”| |如果右偏移大于150px，则为.over块添加类“left”）