Chinaunix首页 | 论坛 | 博客

欣颜轩的ChinaUnix博客

首页　| 　博文目录　| 　关于我

645401126

  • 博客访问： 12229
  • 博文数量： 22
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 10
  • 用 户 组： 普通用户
  • 注册时间： 2014-02-08 17:41
文章分类

全部博文（22）

文章存档

2014年（22）

我的朋友
最近访客
推荐博文
相关博文
渐隐半透明效果

分类： Java

2014-02-08 17:58:12

原文地址：渐隐半透明效果 作者：baiyejianxin

 
渐隐半透明效果
需要的图片：
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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; //隐藏层的状态
     $("#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("状态错误！")
         }
        
     });
    
     $("#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">&nbsp;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
下载: 下载
阅读(111) | 评论(0) | 转发(0) |
0

上一篇：图片展示

下一篇：经典的登录表单验证

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6