Jquery—加载进度条 -

nddjava

浏览: 108915 次
性别:
来自: 广州

最近访客更多访客>>

aina5626

JavaStudyEye

testjiang3

davidwang456

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (35)

社区版块

存档分类

Jquery—加载进度条

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>

分享到：