脚本中对层的实际应用

显示如上的层,用于提示一些需要的基本信息,模仿迅雷中的一个应用.代码如下(这里使用了一个图片xl.png,自己弄一个吧):

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< html >    
   < head >

   < title ></ title >    
   
< script  language ="javascript" >
function  onmouseoverhandler()
{
var  x  =  window.event.x; // 获得鼠标X轴坐标
var  y  =  window.event.y; // 获得鼠标Y轴坐标

var  div  =  document.getElementById( " Layer1 " );  // 获得文档中id值为'Layer1'的对象
div.style.display = " block " ;  // 设置层显示样式为区块,显示层
div.style.top  =  y;  // 设置层的顶端坐标
div.style.left  =  x; // 设置层的左端坐标
var  tm =  document.getElementById( " lb_Time " );  // 获得文档中id值为'lb_Time'的对象
var  tmp  =   new  Date();    // 获得客户端当前时间
tm.innerHTML = " 当前时间:  " + tmp.getFullYear() + " - " + (tmp.getMonth() + 1 ) + " - " + tmp.getDate();  // 设置对象'lb_Time'的内嵌HTML代码,此处使用innerText也可.
}
function  onmouseleavehander()
{
   var  div  =  document.getElementById( " Layer1 " );  // 获得文档中id值为'Layer1'的对象
  div.style.display = " none " ;                     // 设置层显示样式为'none'-不显示,隐藏层
}
  
function  hiddenDiv(obj)
{
  
  
   var  div  =  document.getElementById( " showInfo " ); 
  div.style.filter = " alpha(opacity=50) " ;
  div.style.backgroundColor = " #FFF9BC " ;
   if (obj.value == " 隐藏层 " )
 {
   div.style.display = " none " ; 
   obj.value = " 显示层 " ;
 } else
 {
   div.style.display = " block " ;
   obj.value = " 隐藏层 " ;
 }                  
}

   
</ script >
   </ head >    
    
   < body >
    < br >    
    < center >
      < input  type =button  value ="显示提示信息"  onmouseover ="onmouseoverhandler();"  onmouseleave ="onmouseleavehander();" /> &nbsp;
      < input  type =button  value ="隐藏层"  onclick ="hiddenDiv(this);" />  
   </ center >
   < div  id ="Layer1"    style ="display:none;filter:Alpha(Opacity=90);opacity:0.90;position:absolute;width:145px;height:78px;
   z-index:1;background-color:#ffffff;border: solid 1px #9DCEE8 " >
     < div  di ="LayOne"  style ="filter:Alpha(Opacity=50);opacity:0.50;height:20px;padding-top:4px;text-align:right;border-width : 0px;" >
   < label  id ="lb_Time"  style ="font-size:12px" ></ label >
    </ div >
    < div  di ="LayTwo"  style ="height:20px;border-width : 0px;" >
    < b >< label  id ="lb_Two"  style ="font-size:12px" > LayerTwo  </ label ></ b >
    </ div >
    < div  di ="LayThree"  style ="filter:Alpha(Opacity=50);opacity:0.50;height:20px;border-width : 0px;" >
    < font  style ="font-size:12px" >< label  id ="lb_Three" > LayerThree </ label > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; < img  src ="xl.png"  

style ="width:26px; height:12px; position:relative;" />
    </ font >
    </ div >
     < div  id ="LayUser"  style ="background-color:#1b69b9;height:20px;text-align:right;border-width : 0px;" >
    < label  style ="color:#ffffff;font-size:12px;t" > 用户名称 &nbsp; </ label >
     </ div >
    </ div >  
    < br />
   < div  id ="showInfo" >
    < li > 层中样式使用的参数的简单说明: </ li >
    < li > display:none; 隐藏层 </ li >
    < li > filter:Alpha(Opacity=90);opacity:0.90; 层的透明度为90%[使用其中一个即可] </ li >
    < li > position:absolute; 层的位置:绝对 这个设置不会对影响层外面的数据的位置,relative 相对就会影响了 </ li >
    < li > border: solid 1px #9DCEE8 层的边框的样式大小和颜色,这个顺序是固定的 </ li >
    < li > background-color:#1b69b9; 层的背景色 </ li >
    < li > 层中的层的透明度的设置是一定会有影响的 </ li >
</ div >
</ body >    
   </ html >