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


Posted in Javascript onMarch 25, 2016

本文实例讲述了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) ? true : false;
}
//取得页面的高宽
function getBodySize(){
  var bodySize = [];
  with(document.documentElement) {
  bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度,取得滚动条的宽度,否则取页面宽度
  bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度,取得滚动条的高度,否则取高度
  }
  return bodySize;
}
//创建遮盖层
function popCoverDiv(){
  if (M("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>用户名: </lable><input type="text" size="20" />
  <lable>密码: </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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
Javascript玩转继承(三)
May 08 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 #Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 #Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
详解Javascript继承的实现
Mar 25 #Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 #Javascript
JavaScript修改作用域外变量的方法
Mar 25 #Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
php中$this-&amp;gt;含义分析
2009/11/29 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python获取交互式ssh shell的方法
2019/02/14 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python游戏开发的五个案例分享
2020/03/09 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
教师年终个人自我评价
2013/10/04 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
银行转正自我鉴定
2014/09/29 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
图解上海144收音机
2021/04/22 无线电
Python入门之使用pandas分析excel数据
2021/05/12 Python
python自动化八大定位元素讲解
2021/07/09 Python