javascript控制层-优快云博客

本文链接：https://blog.youkuaiyun.com/liuchao1211/article/details/3273546

 
 <HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <script language="javascript">
        function show()
        {
            var msg = document.getElementById("msg");//取得弹出的层 
            msg.style.display="block" ;    //msg的初始状态是不可见的,设为block,即显示在最上层 
            /*以下为设置弹出层的相应参数*/
            msg.style.fontSize=12 ;
            msg.style.color="blue" ;
            msg.style.textAlign="center";
            msg.style.filter="Alpha(Opacity=80, FinishOpacity=80, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=50)";//实现透明效果 
            msg.style.width=100; //层宽 
            msg.style.height=50; //层高 
            msg.style.border="solid"
            msg.style.borderWidth="1mm"
            msg.style.borderColor="white" ;
            msg.style.backgroundColor="#8899cc";
            msg.style.left=event.clientX ;  //鼠标当前位置就是层的位置,向下移动10px,方便看到内容 
            msg.style.top= event.clientY+10 ;
            msg.style.position="absolute" ;   //必定指定这属性,不然层不会跟着鼠标移动 
        }
        function hidde()
        {
            var msg = document.getElementById("msg"); //取得弹出的层 
            msg.style.display="none" ;  //隐藏该层 
        }
    </script>
 </HEAD>
 <BODY>
    动作喜剧爱
    <a href="#" onmouseOver="show()" onmouseOut="hidde()">控制层</a>
    情科幻灾<br>
    难恐怖记录<br>
    <div id="msg" style="display:none">
        
        控制层效果
        
    </div>
 </BODY>
</HTML>
 