亚洲av成人无遮挡网站在线观看,少妇性bbb搡bbb爽爽爽,亚洲av日韩精品久久久久久,兔费看少妇性l交大片免费,无码少妇一区二区三区

Chinaunix

標題: 漸隱半透明效果 [打印本頁]

作者: baiyejianxin 時間: 2009-08-29 17:29
標題: 漸隱半透明效果

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

!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

歡迎光臨 Chinaunix (http://72891.cn/)