javascript控制层

 
  1. <HTML>
  2.  <HEAD>
  3.   <TITLE> New Document </TITLE>
  4.     <script language="javascript">
  5.         function show()
  6.         {
  7.             var msg = document.getElementById("msg");//取得弹出的层
  8.             msg.style.display="block" ;    //msg的初始状态是不可见的,设为block,即显示在最上层
  9.             /*以下为设置弹出层的相应参数*/
  10.             msg.style.fontSize=12 ;
  11.             msg.style.color="blue" ;
  12.             msg.style.textAlign="center";
  13.             msg.style.filter="Alpha(Opacity=80, FinishOpacity=80, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=50)";//实现透明效果
  14.             msg.style.width=100; //层宽
  15.             msg.style.height=50; //层高
  16.             msg.style.border="solid"
  17.             msg.style.borderWidth="1mm"
  18.             msg.style.borderColor="white" ;
  19.             msg.style.backgroundColor="#8899cc";
  20.             msg.style.left=event.clientX ;  //鼠标当前位置就是层的位置,向下移动10px,方便看到内容
  21.             msg.style.top= event.clientY+10 ;
  22.             msg.style.position="absolute" ;   //必定指定这属性,不然层不会跟着鼠标移动
  23.         }
  24.         function hidde()
  25.         {
  26.             var msg = document.getElementById("msg"); //取得弹出的层
  27.             msg.style.display="none" ;  //隐藏该层
  28.         }
  29.     </script>
  30.  </HEAD>
  31.  <BODY>
  32.     动作喜剧爱
  33.     <a href="#" onmouseOver="show()" onmouseOut="hidde()">控制层</a>
  34.     情科幻灾<br>
  35.     难恐怖记录<br>
  36.     <div id="msg" style="display:none">
  37.         
  38.         控制层效果
  39.         
  40.     </div>
  41.  </BODY>
  42. </HTML>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值