>웹 프론트엔드 >JS 튜토리얼 >js를 사용하여 마스킹을 구현하고 이동 가능한 로그인 window_javascript 기술 팝업

js를 사용하여 마스킹을 구현하고 이동 가능한 로그인 window_javascript 기술 팝업

WBOY
WBOY원래의
2016-05-16 17:29:481243검색
코드 복사 코드는 다음과 같습니다.




   
    < ;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 = (클라이언트 -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";             var moveable = true;
            var loginDiv = document.getElementById("loginDiv");
            //以下变weight提前设置好                       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() {
                다음과 같은 경우 (이동 가능) {
                   var y = moveTop window.event.clientY - clientY;
                 var x = moveLeft window.event.clientX - clientX;
                  if (x & gt; 0 && y > 0) {
                       loginDiv.style.top = y "px";
                     loginDiv.style.left = x "px";
                   }
                }
            }
            document.onmouseup = function Mouseup() {
                moveable = false;
            }
        }