熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

利用js實現遮罩以及彈出可移動登錄窗口

2013-11-15 11:56:11  來源: JSP教程 
本篇文章是對使用js實現遮罩以及彈出可移動登錄窗口的實現方法進行了詳細的分析介紹需要的朋友參考下   復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
    <title></title>
    <script type="text/javascript">
        function showLogin() {
            var loginDiv = documentgetElementById("loginDiv");
            var zhezhao = documentgetElementById("zhezhao");
            var clientx = documentdocumentElementclientWidth;
            var clienty = documentdocumentElementclientHeight;
            var l_margin = (clientx parseInt(loginDivstylewidth)) / ;
            var t_margin = (clienty parseInt(loginDivstyleheight)) /
            loginDivstyleleft = l_margin + "px";
            loginDivstyletop = t_margin +"px";
            loginDivstyledisplay = "block";
            zhezhaostyledisplay = "block";
        }
        function hidLogin() {
            var loginDiv = documentgetElementById("loginDiv");
            var zhezhao = documentgetElementById("zhezhao");
            loginDivstyledisplay = "none";
            zhezhaostyledisplay = "none";
        }
        function titleMove() {
            var moveable = true;
            var loginDiv = documentgetElementById("loginDiv");
            //以下變量提前設置好                        var clientX = windoweventclientX;
            var clientY = windoweventclientY;
            var moveTop = parseInt(loginDivstyletop);
            var moveLeft = parseInt(loginDivstyleleft);
            documentonmousemove = function MouseMove() {
                if (moveable) {
                    var y = moveTop + windoweventclientY clientY;
                    var x = moveLeft + windoweventclientX clientX;
                    if (x > && y > ) {
                        loginDivstyletop = y + "px";
                        loginDivstyleleft = x + "px";
                    }
                }
            }
            documentonmouseup = function Mouseup() {
                moveable = false;
            }
        }
    </script>
</head>
<body>
<!Main start zindex:>
<div id="Main" style="position:absolute;zindex:;">
<a href="javascript:showLogin()">登陸</a>
</div>
<!Main start zindex:>
<!loginDiv start :zindex:>
<div id="loginDiv" style="backgroundcolor:white;width:px;height:px;border:px solid blue;zindex:;display:none;position:absolute;bordertop:none">
    <div onmousedown="titleMove()" id="login_title" style="width:px;height:px;backgroundcolor:Blue;border:px solid silver;borderleft:none;borderright:none">
        <!<img src="/images/closejpg" style="float:right" onclick="hidLogin()"/>>
        <a href="javascript:hidLogin()" style="float:right;textdecoration:none;color:white;marginright:px;fontsize:px">×</a>
    </div>
    <table style="clear:right;width:px;height:px;textalign:right;margintop:px;">
        <tr><td>用戶名</td><td><input type="text" style="width:px;" /></td><td>  </td></tr>
        <tr><td>密碼:</td><td><input type="text"  style="width:px;" /></td><td>  </td></tr>
        <tr><td><br /></td><td></td></tr>
    </table>
</div>
<!loginDiv end :zindex:>
<!zhezhao start: zindex:>
<div id="zhezhao" style="position:absolute;zindex:;width:%;height:%;backgroundcolor:silver;display:none;opacity:;">
<!zhezhao end>
</div>
</body>
</html>

  
【效果】
image


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19925.html
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.