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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Node.js的特点详解
Feb 03 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
安装APACHE
2007/01/15 PHP
php自定义apk安装包实例
2014/10/20 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
《要下雨了》教学反思
2014/02/17 职场文书
工作迟到检讨书
2014/02/21 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2016党校培训心得体会
2016/01/07 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript