Maison > interface Web > js tutoriel > Implémenter un effet d'écran de verrouillage de couche div de masque transparent plein écran basé sur les compétences JavaScript_javascript

Implémenter un effet d'écran de verrouillage de couche div de masque transparent plein écran basé sur les compétences JavaScript_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 15:18:02
original
1782 Les gens l'ont consulté

Sans plus tarder, permettez-moi d'écrire le code js pour vous. Le code est le suivant :

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

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

<!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>js全屏透明遮罩锁屏效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

#pageOverlay{visibility:hidden;position:fixed;top:0;left:0;z-index:1987;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7;}

/*IE6 fixed*/

* html{background:url(*) fixed;}

* html body{margin:0;height:100%;}

* html #pageOverlay{position:absolute;left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}

</style>

<script language="javascript">

(function(){

// 获取对象

var $ = function (id){

return document.getElementById(id);

};

// 遍历

var each = function(a, b) {

for (var i = 0, len = a.length; i < len; i++) b(a[i], i);

};

// 事件绑定

var bind = function (obj, type, fn) {

if (obj.attachEvent) {

obj['e' + type + fn] = fn;

obj[type + fn] = function(){obj['e' + type + fn](window.event);}

obj.attachEvent('on' + type, obj[type + fn]);

} else {

obj.addEventListener(type, fn, false);

};

};

// 移除事件

var unbind = function (obj, type, fn) {

if (obj.detachEvent) {

try {

obj.detachEvent('on' + type, obj[type + fn]);

obj[type + fn] = null;

} catch(_) {};

} else {

obj.removeEventListener(type, fn, false);

};

};

// 阻止浏览器默认行为

var stopDefault = function(e){

e.preventDefault &#63; e.preventDefault() : e.returnValue = false;

};

// 获取页面滚动条位置

var getPage = function(){

var dd = document.documentElement,

db = document.body;

return {

left: Math.max(dd.scrollLeft, db.scrollLeft),

top: Math.max(dd.scrollTop, db.scrollTop)

};

};

// 锁屏

var lock = {

show: function(){

$('pageOverlay').style.visibility = 'visible';

var p = getPage(),

left = p.left,

top = p.top;

// 页面鼠标操作限制

this.mouse = function(evt){

var e = evt || window.event;

stopDefault(e);

scroll(left, top);

};

each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {

bind(document, o, lock.mouse);

});

// 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Down

this.key = function(evt){

var e = evt || window.event,

key = e.keyCode;

if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {

try{

e.keyCode = 0;

}catch(_){};

stopDefault(e);

};

};

bind(document, 'keydown', lock.key);

},

close: function(){

$('pageOverlay').style.visibility = 'hidden';

each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {

unbind(document, o, lock.mouse);

});

unbind(document, 'keydown', lock.key);

}

};

bind(window, 'load', function(){

$('btn_lock').onclick = function(){

lock.show();

};

$('pageOverlay').onclick = function(){

lock.close();

};

});

})();

</script>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<button id="btn_lock" style="position:absolute;left:50%;top:40%;">开启锁屏</button>

<ol id="test">

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

<li>www.jb51.net</li>

</ol>

<div id="pageOverlay"></div>

</body>

</html>

Copier après la connexion

Le code suivant est écrit en js pour créer un effet de masque de connexion

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>

Copier après la connexion

Ce qui précède est le contenu pertinent basé sur JavaScript pour obtenir l'effet d'écran de verrouillage de couche div de masque transparent plein écran. J'espère que cela sera utile à tout le monde.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal