JS实现点击登录弹出窗口同时背景色渐变动画效果

站长资源 2024/11/19 佚名

30 1538 30

富贵资源网 Design By www.hznty.com

本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果。分享给大家供大家参考，具体如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;
  }
body {
background-color: #0099CC;
}
.STYLE1 {color: #FFFF00}
</STYLE>
<script type="text/javascript">
var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度
function M(id){
  return document.getElementById(id);//用M()方法代替document.getElementByIdx_x(id)
}
function MC(t){
  return document.createElement(t);//用MC()方法代替document.createElement_x(t)
};
//判断浏览器是否为IE
function isIE(){
   return (document.all && window.ActiveXObject && !window.opera) "cover_div")) {
  //如果存在遮盖层，则让其显示
  M("cover_div").style.display = 'block';
  } else {
  //否则创建遮盖层
  var coverDiv = MC('div');
  document.body.appendChild(coverDiv);
  coverDiv.id = 'cover_div';
  with(coverDiv.style) {
   position = 'absolute';
   background = '#CCCCCC';
   left = '0px';
   top = '0px';
   var bodySize = getBodySize();
   width = bodySize[0] + 'px'
   height = bodySize[1] + 'px';
   zIndex = 0;
   if (isIE()) {
   filter = "Alpha(Opacity=60)";//IE逆境
   } else {
   opacity = 0.6;
   }
  }
  }
}
//让登陆层显示为块
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="#">aaa</a>
}
//关闭DIV层
function close(){
     M('login').style.display = 'none';
     M("cover_div").style.display = 'none';
    void(0);
}
</script>
</head>
<body>
<br>
<br>
<div align="center"><a href="javascript:open();" class="STYLE1">登陆</a></div>
<div id="login">
<span>用户登陆</span>
  <div id="panel">
  <lable>用户名:&nbsp;</lable><input type="text" size="20" />
  <lable>密码:&nbsp;</lable><input type="password" size="20">
  <input type="checkbox" /><lable>登陆</lable>
  </div>
  <input type="button" value="提交" />
  <a href="javascript:close();">关闭</a>
</div>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS,点击登录,弹出窗口,背景色,渐变动画

富贵资源网 Design By www.hznty.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

富贵资源网 Design By www.hznty.com

评论“JS实现点击登录弹出窗口同时背景色渐变动画效果”

暂无评论...

www.hznty.com 富贵资源网

20,135影音资源

44,641技术资源

2,817软件资源

435,032站长资源

JS实现点击登录弹出窗口同时背景色渐变动画效果

JavaScript学习笔记之ES6数组方法

JS实现响应鼠标点击动画渐变弹出层效果代码

评论“JS实现点击登录弹出窗口同时背景色渐变动画效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接