隐藏select,显示层

<script language="javascript">

// 隐藏被ID为objID的对象(层)遮挡的所有select
function HideOverSels(objID)
{
    var sels = document.getElementsByTagName('select');
    for (var i = 0; i < sels.length; i++)
      if (Obj1OverObj2(document.all[objID], sels[i]))
        sels[i].style.visibility = 'hidden';         
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
  var pos1 = getPosition(obj1)
  var pos2 = getPosition(obj2)
  var result = true;
  var obj1Left = pos1.left - window.document.body.scrollLeft;
  var obj1Top = pos1.top - window.document.body.scrollTop;
  var obj1Right = obj1Left + obj1.offsetWidth;
  var obj1Bottom = obj1Top + obj1.offsetHeight;
  var obj2Left = pos2.left - window.document.body.scrollLeft;
  var obj2Top = pos2.top - window.document.body.scrollTop;
  var obj2Right = obj2Left + obj2.offsetWidth;
  var obj2Bottom = obj2Top + obj2.offsetHeight;
 
  if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
      obj1Left >= obj2Right || obj1Top >= obj2Bottom)
    result = false;
  return result;
}

// 获取对象的坐标
function getPosition(Obj)
{
 for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
 return {left:sumLeft,top:sumTop}
}
</script>

<script>
    window.onload = function(){HideOverSels("div1")}
</script>

<div style="position: absolute;left:10px;top:20px;width:200px;height:200px;border:1px solid red;" id="div1">
看看这个层下面的select是不是都隐藏了:)
</div>
<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />


<select name="">
 <option>test1</option>
 <option>test2</option>
 <option>test3</option>
</select>
<P />

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值