Jquery—加载进度条

最新推荐文章于 2015-04-23 20:14:13 发布

nddjava

最新推荐文章于 2015-04-23 20:14:13 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/nddjava/article/details/84239611

01.<html>
02. <head>
03. <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
04. <script type="text/javascript" src="./jquery-1.4.4.js"></script>
05. <style type="text/css">
06. .divv
07. {
08. position:absolute;
09. top:30%;
10. left:30%;
11. width:80px;
12. height:60px;
13. border:1px solid #666;
14. background-color:#9CF;
15. text-align:center;
16. display:none;
17. z-index:300;
18. }
19. .popup
20. {
21. border:1px solid red;
22. position:absolute;
23. top:0px;
24. left:0px;
25. width:100%;
26. height:100%;
27. background-color:#000;
28. filter:alpha(opacity=45);
29. opacity:0.45;
30. display:none;
31. z-index:200;
32. }
33. .fff
34. {
35. border:1px solid blue;
36. position:relative;
37. background-color:#000;
38. }
39. </style>
40. <script type="text/javascript">
41. $(document).ready(
42. function(){
43.
44. //页面初始化
45. goCenter();
46.
47. //滚动条滚动
48. $(window).scroll(
49. function(){
50. goCenter();
51. }
52. );
53.
54. //拖动浏览器窗口
55. $(window).resize(
56. function(){
57. goCenter();
58. }
59. );
60.
61. //锁屏
62. $("#lockButton").click(
63. function(){
64. $("#popupDiv").show();
65. $("#alertDiv").show();
66. }
67. );
68.
69. //解屏
70. $("#unlockButton").click(
71. function(){
72. $("#popupDiv").hide();
73. $("#alertDiv").hide();
74. }
75. );
76. }
77. );
78.
79. function goCenter()
80. {
81. var h = $(window).height();
82. var w = $(window).width();
83. var st = $(window).scrollTop();
84. var sl = $(window).scrollLeft();
85.
86. $("#popupDiv").css("width", w+sl);
87. $("#popupDiv").css("height", h+st);
88. $(".divv").css("top", ((h-60)/2)+st);
89. $(".divv").css("left", ((w-80)/2)+sl);
}
</script>
</head>

<body bgcolor="#FFFFFF">

<select name="sdfas">
<option value="a">aaa</option>
<option value="b">bbb</option>
</select>

<input type="button" value="锁屏" id="lockButton"/>

<div class="popup" id="popupDiv">

<iframe frameborder="1" scrolling="no" height="100%" width="100%" class="fff"></iframe>
</div>

<div class="divv" id="alertDiv">
<input type="button" value="关闭" id="unlockButton"/>
</div>

</body>
</html>