漸隱半透明效果

baiyejianxin

漸隱半透明效果
需要的圖片：
  


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
title>無標題文檔/title>
script src="js/jquery-1.3.2.js">/script>
script>
   
   $(document).ready(function(){
      var station = false; //隱藏層的狀態(tài)
     $("#show").click(function(){
     if(station==false){
         
         $(".backgroundDiv").css({"opacity":"0.5"}).fadeIn('normal');
            
             var scrollWidth = document.documentElement.clientWidth;
             var scrollHeight = document.documentElement.clientHeight;
             var divWidth = $(".info").width();
             var divHeight = $(".info").height();
             var divLeft = scrollWidth/2-divWidth/2;
             var divTop = scrollHeight/2-divHeight/2;
             $(".info").css({"position":"absolute","top":divTop,"left":divLeft}).fadeIn('normal');
         station=true;
         }else{
         alert("狀態(tài)錯誤！")
         }
         
     });
     
     $("#close").click(function(){
     if(station==true){
         $(".info").fadeOut('normal');
            $(".backgroundDiv").fadeOut('normal');
            station =false;
         }
     });
   
   });
/script>
style>
  .backgroundDiv{ width:100%; height:100%; display:none; z-index:10; background-color:#333333; position:absolute; top:0px; left:0px;}
  .info{ width:400px; height:300px; background-color:#FFFFFF; border:5px solid #0066FF; display:none; position:absolute; left:0px; top:0px; z-index:11}
  #closeDiv{ float:right; width:22px; height:22px; margin-top:10px; margin-right:10px;}
  .close{ float:right}
/style>
/head>
body>
    center>
       img src="images/opacity.jpg" />
       div>
          button id="show">press me/button>
       /div>
    /center>
   
    div class="backgroundDiv"> sss/div>
   
    div class="info">
       div id="closeDiv">
         img id="close" src="images/close.jpg" width="22" />
       /div>
       img src="images/opacity.jpg" width="400px"/>
    /div>
/body>
/html>
完整實例：

文件:
半透明背景層.rar
大小:
158KB
下載:
下載


本文來自ChinaUnix博客，如果查看原文請點：http://blog.chinaunix.net/u3/93876/showart_2041189.html