Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Summary of login mask effects implemented in javascript_javascript skills

Summary of login mask effects implemented in javascript_javascript skills

WBOY
Release： 2016-05-16 15:33:19
Original
1429 people have browsed it

Login mask effect implemented by javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>遮罩</title>
<style>
  #blanks{
    display:none;
    width:100%;
    //height:100%;
    height:100px;
    position:absolute;
    top:0;
    background-color:#ccc;
    z-index:1000;
    -moz-opacity: 0.7; 
    opacity:.70; 
    filter: alpha(opacity=70);
  }
  #login{
    padding:18px;
    display:none;
    background-color:pink;
    width:300px;
    height:100px;
    position:absolute;
    left:400px;
    top:20%;
    z-index:1001;
     
  }
</style>
</head>
<body onload="setHeight()">
   <div id="content">
      <input type="button" value="登陆" onclick="showLogin()">
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
      <p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。
      作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，
      像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。
      这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。
      如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能
      </p>
   </div>
   <div id="blanks"></div>
   <div id="login">
      <form method="post">
        用户名：<input type="text" name="username" ><br/>
        密  码：<input type="password" name="password"><br/>
          <input type="submit" value="提交">
      </form>
       <div id="btnclose" style="position:absolute;left:93%;top:0%;z-index:5;">
         <img src="close.png" onclick="hidediv();"/>
       </div>
   </div>
</body>
</html>
<script type="text/javascript">
 function setHeight()
 {
    var h=document.documentElement.scrollHeight;
    document.getElementById("blanks").style.height=h+"px";
   }
 function hidediv()
  {
    document.getElementById("login").style.display="none";
    document.getElementById("blanks").style.display="none";
   }
 function showLogin()
 {
    document.getElementById("login").style.display="block";
    document.getElementById("blanks").style.display="block";
   }
</script>
Copy after login

The core content of the above code is 

<script type="text/javascript">
 function setHeight()
 {
    var h=document.documentElement.scrollHeight;
    document.getElementById("blanks").style.height=h+"px";
   }
 function hidediv()
  {
    document.getElementById("login").style.display="none";
    document.getElementById("blanks").style.display="none";
   }
 function showLogin()
 {
    document.getElementById("login").style.display="block";
    document.getElementById("blanks").style.display="block";
   }
</script>
Copy after login

Example 2: 

<!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>
  <title></title>
  <script type="text/javascript">
    function showLogin() {
      var loginDiv = document.getElementById("loginDiv");
      var zhezhao = document.getElementById("zhezhao");
      var clientx = document.documentElement.clientWidth;
      var clienty = document.documentElement.clientHeight;
      var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2;
      var t_margin = (clienty - parseInt(loginDiv.style.height)-200) / 2
      loginDiv.style.left = l_margin + "px";
      loginDiv.style.top = t_margin +"px";
      loginDiv.style.display = "block";
      zhezhao.style.display = "block";
    }
    function hidLogin() {
      var loginDiv = document.getElementById("loginDiv");
      var zhezhao = document.getElementById("zhezhao");
      loginDiv.style.display = "none";
      zhezhao.style.display = "none";
    }
    function titleMove() {
      var moveable = true;
      var loginDiv = document.getElementById("loginDiv");
      //以下变量提前设置好            var clientX = window.event.clientX;
      var clientY = window.event.clientY;
      var moveTop = parseInt(loginDiv.style.top);
      var moveLeft = parseInt(loginDiv.style.left);
      document.onmousemove = function MouseMove() {
        if (moveable) {
          var y = moveTop + window.event.clientY - clientY;
          var x = moveLeft + window.event.clientX - clientX;
          if (x > 0 && y > 0) {
            loginDiv.style.top = y + "px";
            loginDiv.style.left = x + "px";
          }
        }
      }
      document.onmouseup = function Mouseup() {
        moveable = false;
      }
    }
  </script>
</head>
<body>
<!--Main start z-index:0-->
<div id="Main" style="position:absolute;z-index:0;">
<a href="javascript:showLogin()">登陆</a>
</div>
<!--Main start z-index:0-->
<!--loginDiv start :z-index:2-->
<div id="loginDiv" style="background-color:white;width:300px;height:150px;border:1px solid blue;z-index:2;display:none;position:absolute;border-top:none">
  <div onmousedown="titleMove()" id="login_title" style="width:300px;height:25px;background-color:Blue;border:1px solid silver;border-left:none;border-right:none">
    <!--<img src="http://www.zhujiangroad.com/images/close.jpg" style="float:right" onclick="hidLogin()"/>-->
    <a href="javascript:hidLogin()" style="float:right;text-decoration:none;color:white;margin-right:2px;font-size:20px">×</a>
  </div>
  <table style="clear:right;width:298px;height:115px;text-align:right;margin-top:10px;">
    <tr><td>用户名：</td><td><input type="text" style="width:180px;" /></td><td> </td></tr>
    <tr><td>密码:</td><td><input type="text" style="width:180px;" /></td><td> </td></tr>
    <tr><td><br /></td><td></td></tr>
  </table>
</div>
<!--loginDiv end :z-index:2-->
<!--zhezhao start: z-index:1-->
<div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:100%;background-color:silver;display:none;opacity:.5;">
<!--zhezhao end-->
</div>
</body>
</html>
Copy after login

Example 3: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>弹出登录框的实现代码</title>
</head>
<body>
<style type="text/css">
body {
margin: 0px;padding:0
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
background: #000000;
filter:Alpha(opacity=30);
}
#div2 {
display: none;
position: absolute;
height: 100%;
width: 100%;
padding-top: 10%;
z-index: 1001;
left: 0px;
top: 0px;
}
</style>
<script>
function openme(){
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='block';
}
function closeme(){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
}
function logo_in(){alert()
//验证
//转向...
//myform.action=""
//myform.submit()
closeme();
}
</script>
<div id="div1"></div>
<div id="div2">
<table width="30%" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center">
<tr id="m_tr">
<td><font color="#FFFFFF">欢迎登陆：</font></td>
<td align="right">
<input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;">
</td>
</tr>
<tr>
<form name="myform" method="post" >
<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150">
username: <input type="text" name="username" size="10">
<br>pasword:<input type="password" name="pasword" size="12">
<br><input type="button" name="logoin" value="登陆" onClick="logo_in()">
<input type="button" name="exit" value="取消" onClick="closeme()">
</td>
</form>
</tr>
</table>
</div>
<div>
<input name="button" type="button" onClick="openme()" value="登陆" />
</div>
<br>
<div>
简单的代码
</div>
</body>
</html>
Copy after login

Example 4

JS production with mask pop-up layer to realize login registration form code special effects

<!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=utf-8"/>
<title>js制作带有遮罩弹出层实现登录注册表单代码特效</title>
<link rel="stylesheet" type="text/css" href="css/198zone.css">
</head>
<body>
<a class="btn01" data-toggle="modal" href="#login-modal">登录</a>
<a class="btn02" data-toggle="modal" href="#signup-modal">注册</a>
<a class="btn03" data-toggle="modal" href="#forgetform">找回密码</a>
<a class="btn02" data-toggle="modal" href="#activation-modal">用户信息</a>
<a class="btn03" data-toggle="modal" href="#setpassword-modal">重置密码</a>
<div class="modal" id="login-modal">
<a class="close" data-dismiss="modal">×</a>
<h1>登录</h1>
<ul class="login-bind-tp">
<li class="qweibo"> <a href="http://www.jb51.net"><em> </em> QQ登录</a> </li>
<li class="sina"> <a href="http://www.jb51.net"><em> </em> 微博登录</a> </li>
<li class="douban"> <a href="http://www.jb51.net"><em> </em> 豆瓣登录</a> </li>
</ul>
<p>或者使用已有帐号登陆：</p>
<form class="login-form clearfix" method="post" action="http://www.jb51.net">
<div class="form-arrow"></div>
<input name="email" type="text" placeholder="邮箱：">
<input name="password" type="password" placeholder="密码：">
<input type="submit" name="type" class="button-blue login" value="登录">
<input type="hidden" name="return-url" value="">
<div class="clearfix"></div>
<label class="remember"><input name="remember" type="checkbox" checked />下次自动登录 </label>
<a class="forgot">忘记密码？</a>
<ul class="third-parties">
<li><p>新浪微博帐号</p></li>
<li><p>腾讯微博帐号</p></li>
<li><p>豆瓣帐号</p></li>
<li><p></p></li>
</ul>
</form>
</div>
<div class="modal" id="signup-modal">
<a class="close" data-dismiss="modal">×</a>
<h1>注册</h1>
<ul class="login-bind-tp">
<li class="qweibo"> <a href="http://www.jb51.net"><em> </em> QQ登录</a> </li>
<li class="sina"> <a href="http://www.jb51.net"><em> </em> 微博登录</a> </li>
<li class="douban"> <a href="http://www.jb51.net"><em> </em> 豆瓣登录</a> </li>
</ul>
<p>或者使用邮箱注册：</p>
<form class="signup-form clearfix" method="post" action="http://www.jb51.net">
<p class="error"></p>
<input name="email" type="text" placeholder="邮箱：">
<input name="password" type="password" placeholder="密码：">
<input name="password1" type="password" placeholder="确认密码：">
<input name="username" type="text" placeholder="用户名：">
<input type="hidden" name="title" value="">
<input type="hidden" name="url" value="">
<div class="clearfix"></div>
<input type="button" name="type" class="button-blue reg" value="注册" data-action="regist">
<ul class="third-parties">
<li><p>新浪微博帐号</p></li>
<li><p>腾讯微博帐号</p></li>
<li><p>豆瓣帐号</p></li>
</ul>
</form>
</div>
<div class="modal" id="forgetform">
<a class="close" data-dismiss="modal">×</a>
<h1>忘记密码</h1>
<form class="forgot-form" method="post" action="http://www.jb51.net">
<input name="email" value="" placeholder="注册邮箱：">
<div class="clearfix"></div>
<input type="submit" name="type" class="forgot button-blue" value="发送重设密码邮件">
</form>
</div>
<div class="modal" id="activation-modal">
<a class="close" data-dismiss="modal">×</a>
<h1>设置用户信息</h1>
<form class="signup-form clearfix" method="post" action="http://www.jb51.net">
<input autocomplete=off name="username" value="" placeholder="用户名：">
<input autocomplete=off name="password" type="password" placeholder="密码：">
<input autocomplete=off name="password2" type="password" placeholder="确认密码：">
<input type="submit" name="type" class="button-blue reg" value="确认并登录" data-action="regist">
<div class="clearfix"></div>
</form>
</div>
<div class="modal" id="setpassword-modal">
<a class="close" data-dismiss="modal">×</a>
<h1>重置密码</h1>
<form class="signup-form clearfix" method="post" action="http://www.jb51.net">
<input name="email" value="">
<input name="password" type="password" placeholder="密码：">
<input name="password2" type="password" placeholder="确认密码：">
<input name="token" type="hidden" value="">
<input type="submit" name="type" class="button-blue reg" value="设置新密码并登录" data-action="reset">
<div class="clearfix"></div>
</form>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$("a.forgot").click(function(){
		$("#login-modal").modal("hide");
		$("#forgetform").modal({show:!0})
	});
	
	$("#signup-modal").modal("hide");
	$("#forgetform").modal("hide");
	$("#login-modal").modal("hide");
	$("#activation-modal").modal("hide");
	$("#setpassword-modal").modal("hide");
	
});
</script>
<div style="display:none"><script src="http://demo.jb51.net/js/tj.js"></script></div>
<script src="http://demo.jb51.net/js/yxj.js" type="text/javascript"></script>
</body>
</html>
Copy after login

Demo: http://demo.jb51.net/js/2014/jquery-zzdcc-dlzcbd/

Related labels：
javascript登陆遮罩 js遮罩效果
source：php.cn
Previous article：JavaScript method to get the number of hyperlinks in the page_javascript skills Next article：Implementing JD.com-like image carousel effect based on JavaScript_javascript skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2226
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2372
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1980
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1868
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1938
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template