利用JavaScript與CSS透明化視窗

來源:互聯網
上載者:User
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);
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.