JavaScript实现页面遮盖层（带动画效果）

sabolasi

浏览: 908667 次

最近访客更多访客>>

u012363178

jklwan

wangyy

wwssmm00220033

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1295)

社区版块

存档分类

2011-12 ( 21)
2011-11 ( 35)
2011-10 ( 34)
更多存档...

在诸多网页设计中，我们常会用到弹出窗口，这是一个带动画效果的弹出窗口：

<!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>
<STYLE>
#login{
    position: relative;
    display: none;
    top: 20px;
    left: 30px;
    background-color: #ffffff;
    text-align: center;
    border: solid 1px;
    padding: 10px;
    z-index: 1;
}
  
</STYLE>

<mce:script   type="text/javascript"><!--
var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度

//让登陆层显示为块
function showLogin()
{
var login=M("login");
       login.style.display = "block";
}

//设置DIV层的样式
function change(){
   var login = M("login");
   login.style.position = "absolute";
   login.style.border = "1px solid #CCCCCC";
   login.style.background ="#F6F6F6";
   var i=0;
   var bodySize = getBodySize();
   login.style.left = (bodySize[0]-i*i*4)/2+"px";
   login.style.top = (bodySize[1]/2-100-i*i)+"px";
   login.style.width =    i*i*4 + "px";
   login.style.height = i*i*1.5 + "px";
   
   popChange(i);
}
//让DIV层大小循环增大
function popChange(i){
   var login = M("login");
   var bodySize = getBodySize();
   login.style.left = (bodySize[0]-i*i*4)/2+"px";
   login.style.top = (bodySize[1]/2-100-i*i)+"px";
   login.style.width =    i*i*4 + "px";
   login.style.height = i*i*1.5+ "px";
   if(i<=10){
          i++;
          setTimeout("popChange("+i+")",10);//设置超时10毫秒
   }
}
//打开DIV层
function open()
{
change();
showLogin();
popCoverDiv()
void(0);//不进行任何操作,如：<a href="#" mce_href="#">aaa</a>
}
//关闭DIV层
function close(){
    M('login').style.display = 'none';
    M("cover_div").style.display = 'none';
void(0);
}
// --></mce:script>
</head>

<body>

分享到：