黑马程序员技术交流社区

标题: javascript实现的可拖动窗口 [打印本页]

作者: 陈辉    时间: 2012-11-19 09:25
标题: javascript实现的可拖动窗口
在看杨老师的视频,在dom这季中,有一个点击登录,弹出登录窗口,自己再次基础上又加了一个功能——让窗口可以拖动:
<!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></title>
    <style type="text/css">
        .divLoginCss
        {
            display:none;
            top:200px;
            left:200px;
            width:500px;
            border-color:Blue;
            border-style:solid;
            border-width:thin;
            background-color:Gray;
        }   
    </style>
    <script type="text/javascript">
        function showLogin() {
            divLogin.style.display = "";

        }
        function hideLogin() {
            var divLogin = document.getElementById("divLogin");
            divLogin.style.display = "none";
        }

/********************************实现windows窗体移动效果*************************/
        //var x, y;//存储鼠标在moveWin的层上按下时,相对于这个层左上角的坐标值
        function winMouseDown() {
           // var x = window.event.offsetX;
            //var y = window.event.offsetY;
            var divMove = document.getElementById("moveWin");
            //将鼠标在moveWin的层上按下时,相对于这个层左上角的坐标值存储在id为moveWin的层的自定义属性中
            divMove.setAttribute("x",window.event.offsetX);
            divMove.setAttribute("y",window.event.offsetY);
            document.onmousemove = function () {
                /*测试代码
                alert('sssss');
                var inputa = document.createElement("input");
                inputa.type = "button";
                inputa.value = "你好";
                document.body.appendChild(inputa);*/

                var divMove = document.getElementById("moveWin");
                var divLogin = document.getElementById("divLogin");
                var divMoveX = window.event.clientX;
                var divMoveY = window.event.clientY;
                var x = divMove.getAttribute("x");
                var y = divMove.getAttribute("y");
                if (divMoveY < 0) {
                    return;
                }
                var xx = divMoveX - x;
                var yy = divMoveY - y;
                divLogin.style.left = xx + "px";
                divLogin.style.top = yy + "px";
            };   
        }
        //鼠标松开时,使onmousemove事件不起作用
        function winMouseUp() {
            document.onmousemove = function () {
                window.event.returnValue = false;
            };
        }
        //避免鼠标在其他地方松开时,不能消除onmousemove事件
        document.onmouseup = function () {
            document.onmousemove = function () {
                window.event.returnValue = false;
            };
        };



    </script>
</head>
<body>
<!--
            点击【登录】按钮,弹出一个显示用户名、密码等的层。
        将用户名、密码等写到一个层中,层默认是隐藏的,点击【登录
        】超链接以后将层显示出来,如果点击层中的关闭按钮,则隐藏
        层。绝对定位,显示到中间位置
-->
    <a href="javascript:showLogin()" >[登录]</a>
    <div id="divLogin" style="position:absolute;top:200px;left:200px;border-color:Blue;border-style:solid;border-width:3px;display:none;background-color:Gray;width:500px;">
        <div id="moveWin" style="background-color:Blue;border-color:Blue;border-style:solid;border-width:thin;width:500px;height:30px;cursor:default">
        登录
        <input type="image" src="../img/close.JPG" style="float:right" />
        </div>

        <table>
            <tr>
                <td>
                    <label for="userName">用户名:</label>
                </td>
                <td>
                    <input type="text" id="userName"/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="password">密码:</label>
                </td>
                <td>
                    <input type="text" id="password"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="登录" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

2、主要的思路是:当鼠标按下时,添加onmousemove事件,当鼠标松开时,修改onmousemove 的实现函数,在函数中设置window.event.returnValue 为 false ,使得onmousemove 实现不起作用



作者: 王晨    时间: 2012-12-16 14:08
本帖最后由 刪除記忆ご 于 2012-12-16 14:23 编辑

我这有别人整理的一些javascript特效,你可以看看!好吧,他提示文件太大,传不上来,你需要我发给你吧{:soso_e101:}





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2