search

Home >Web Front-end >JS Tutorial >JS realizes click login pop-up window and background color gradient animation effect_javascript skills

JS realizes click login pop-up window and background color gradient animation effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:08:131424browse

The example in this article describes the JS implementation of clicking on the login pop-up window and the background color gradient animation effect. Share it with everyone for your reference, the details are as follows: 

<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) &#63; true : false;
}
//取得页面的高宽
function getBodySize(){
  var bodySize = [];
  with(document.documentElement) {
  bodySize[0] = (scrollWidth>clientWidth)&#63;scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度
  bodySize[1] = (scrollHeight>clientHeight)&#63;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>

Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques" and "JavaScript Mathematics Summary of operation usage》

I hope this article will be helpful to everyone in JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Have your own javascript form validation plug-in_javascript skillsNext article：Have your own javascript form validation plug-in_javascript skills

Related articles

See more