分享：JavaScript常见应用集合

 

版权所有：刺桐红-技术工作室  蓝文雄

声明：分享类型的文章均为我们工作室为了项目需求封装的工具类，本着分享合作的信念，其中如有错误，欢迎来信交流

lwx707@hotmail.com  2008-08-21

 

这个博文持续完善中……

 

（1）在事件发生处弹出一个面板（Div）：

///显示面板函数，参数:event-触发事件event；id-需要显示的DivID；wWidth-DIVID的宽度
function showBox(event,id,wWidth)
{

 //获取事件发生位置
 var objPos = mousePosition(event);

 var box = document.getElementById(id);
 //设置box显示位置，pos.x参考IE中Event x y属性
 var styleStr="left:"+(((objPos.x-wWidth)>0)?(objPos.x-wWidth):objPos.x)+"px;top:"+(objPos.y)+"px;position:absolute;width:"+wWidth+"px;";
 box.style.cssText = styleStr;
 document.body.appendChild(box);
 
 //关闭窗口,参数：id-需要显示的boxID,实际应用时需要独立处理
 function closeBox(id)
 {
  if(document.getElementById(id)!=null)
  {
   document.getElementById(id).parentNode.removeChild(document.getElementById(id));
  }
 }
  
 //位置抓取函数，参数：出发事件event
 function mousePosition(ev)
 {
  if(ev.pageX || ev.pageY)
  {
   return {x:ev.pageX, y:ev.pageY};
  }
  return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
 }   
}

 

（2）触发事件时产生覆盖层

 

///覆盖层函数，其中结合显示box函数showBox()，参数:bgColor-覆盖层背景颜色；event-触发事件event；id-需要显示的boxID；wWidth-boxID的宽度
function showLayDIV(bgColor,event,id,wWidth)
{
 //获取可见区域 宽度 高度
 var bWidth=parseInt(document.body.clientWidth);
 var bHeight=parseInt(document.body.clientHeight);
 //var bWidth=parseInt(document.documentElement.scrollWidth);
 //var bHeight=parseInt(document.documentElement.scrollHeight);
 
 var isIe=(document.all)?true:false;
 var overlayout=document.createElement("div");
 //设置ID，应用于function closeBox()
 overlayout.id="overlayout";
 var styleStr="top:0px;left:0px;position:absolute;background:"+bgColor+";width:"+bWidth+"px;height:"+bHeight+"px;";
 styleStr+=(isIe)?"filter:alpha(opacity=50);":"opacity:0.40;";
 overlayout.style.cssText=styleStr;
 document.body.appendChild(overlayout);
 showBox(event,id,wWidth);
 //覆盖层渐变效果
 showBackground(overlayout,100);
 
}

 

 //覆盖层渐变效果
 function showBackground(obj,endInt)
 {
  obj.filters.alpha.opacity+=1;
  if(obj.filters.alpha.opacity<endInt)
  {
   setTimeout(function(){showBackground(obj,endInt)},10);
  }
 }

 function closeBox(id)
 {
  if(document.getElementById('overlayout')!=null)
  {
   document.getElementById('overlayout').parentNode.removeChild(document.getElementById('overlayout'));
  }
  if(document.getElementById(id)!=null)
  {
   document.getElementById(id).parentNode.removeChild(document.getElementById(id));
  }
 }