博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

利用JavaScript与CSS透明化窗口

Posted on 2006-09-29 17:10  张明  阅读(805)  评论(0编辑  收藏  举报
CSS代码:
  <style type="text/css">
   .transparent{
     filter:alpha(opacity=90);
     background-color:green;
     display:none;
     width:170;
     height:100;
     position:absolute;
     color:white;
     border:1 green solid;
   }
  </style>
 
  JavaScript代码:
    <script language="javascript">
       function show()
       {
          x=event.clientX+document.body.scrollLeft;
          y=event.clientY+document.body.scrollTop+35;
          Popup.style.display="block";
          Popup.style.left=x;
          Popup.style.top=y;
        }
        function hide()
        {
           Popup.style.display="none";
        }
     </script>
 
    页面代码:
    <body bgcolor="black" text="white">
    <a href="" OnMouseOver="show()" OnMouseMove="show()" OnMouseOut="hide()">Move the mouse over here</a>
       <div id="Popup" class="transparent">
         <div style="background-color:#003366">Title goes here</div>
         <div>Descripting Title here</div>
       </div>
    </body>
 
其它效果:
1.Change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.Glow(color=yellow,strength=5);
 
2.Or change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.DropShadow(color=yellow,strength=5);