> 웹 프론트엔드 > JS 튜토리얼 > javascript_javascript 스킬에 구현된 로그인 마스크 효과 요약

javascript_javascript 스킬에 구현된 로그인 마스크 효과 요약

WBOY
풀어 주다: 2016-05-16 15:33:19
원래의
1439명이 탐색했습니다.

자바스크립트로 구현한 로그인 마스크 효과

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!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>

로그인 후 복사

위 코드의 핵심 내용은

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<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>

로그인 후 복사

예 2:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

<!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>

로그인 후 복사

예 3:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

<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="x" 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>

로그인 후 복사

예시 4

로그인 등록 양식 코드 특수 효과 구현을 위한 마스크 팝업 레이어를 갖춘 JS 제작

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!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>

로그인 후 복사

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿