js 拖动拉缩窗体

fuanyu

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

最近访客更多访客>>

u012321412

scotttom020

bxmingche

JevonZhang8

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery IE Firefox HTML UP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>拖动拉缩窗体</title>
    </head>
    <script type="text/javascript">
        var obj_moing = false;
        var obj_resize = false;
        var obj_Ofx = 0;
        var obj_Vfx = 0;
        var obj_Ofy = 0;
        var obj_Vfy = 0;
        function obj_down(id){//窗口在获得鼠标按下时触发
            if (obj_moing) { //如果正在拖动,那么返回
                return;
            }
            else {
                obj_Ofx = event.clientX; //获取鼠标在网页中的X坐标
                obj_Vfx = document.getElementById(id).offsetLeft; //获取窗口的左位置
                obj_Ofy = event.clientY; //获取鼠标在网页中的X坐标
                obj_Vfy = document.getElementById(id).offsetTop; //获取窗口的左位置
                document.getElementById(id).setCapture(); //锁住拖动的对象
                obj_moing = true; //设置为正在拖动
            }
        }
        function obj_up(id){//当鼠标弹起时触发
            if (obj_moing) {
                document.getElementById(id).releaseCapture();//释放锁住的对象
                obj_moing = false; //设置为不是正在拖动
            }
            if (obj_resize) {
                document.getElementById(id).style.cursor = "auto";//还原鼠标形状
                document.getElementById(id).releaseCapture();//释放锁住的对象
                obj_resize = false; //设置为不能缩放大小
            }
        }
        function obj_move(id){//当鼠标移动时触发
            if (obj_moing){
            var curX = event.clientX;
            var curY = event.clientY;
            var obj_lastx = obj_Vfx+curX-obj_Ofx;    //取得移动后的左位置
            var obj_lasty = obj_Vfy+curY-obj_Ofy;    //取得移动后的上位置
            if(obj_lastx <= 0){
                obj_lastx = 0;
            }
            if(obj_lasty <= 0){
                obj_lasty = 0;
            }
            document.getElementById(id).style.left = obj_lastx;    //设定移动后的位置
            document.getElementById(id).style.top = obj_lasty;    //设定移动后的位置
        }
        if(obj_resize){
            if (event.clientX - parseInt(document.getElementById(id).offsetLeft) > 100 && event.clientY - parseInt(document.getElementById(id).offsetTop) > 100) {
                if (event.clientX - parseInt(document.getElementById(id).offsetLeft) < 1024 && event.clientY - parseInt(document.getElementById(id).offsetTop) < 768) {
                    document.getElementById(id).style.width = event.clientX - parseInt(document.getElementById(id).offsetLeft);
                    document.getElementById(id).style.height = event.clientY - parseInt(document.getElementById(id).offsetTop);
                    document.getElementById("div1td2").style.height = event.clientY - parseInt(document.getElementById(id).offsetTop) - 25;
                }
            }
        }
    }
    function obj_lsdown(id){
        var curX = event.clientX + document.documentElement.scrollLeft;
        var curY = event.clientY + document.documentElement.scrollTop;
        var moveallwidth = parseInt(document.getElementById(id).offsetLeft) + parseInt(document.getElementById(id).offsetWidth);
        var moveallheight = parseInt(document.getElementById(id).offsetTop) + parseInt(document.getElementById(id).offsetHeight);
        var moveleft = parseInt(moveallwidth) - parseInt(curX);
        var movetop = parseInt(moveallheight) - parseInt(curY);
        if (moveleft <= 7 && moveleft >= 0 && movetop <= 7 && movetop >= 0) { //鼠标出现在窗口右下角
            document.getElementById(id).style.cursor="nw-resize";
            document.getElementById(id).setCapture(); //锁住缩放的对象
            obj_resize = true; //设置为正在缩放
        }
    }

/**
   * @deprecated 关闭div 真正的从html中移除div代码，释放资源,兼容ie和火狐
   *
   */

   function closeDiv()
   {
var divobj = document.getElementById("div1");
     divobj.parentNode.removeChild(divobj);
   }

    </script>

    <body bgcolor="#ffffff">
        <div id="div1" style="width:300px;height:300px;top:200px;left:300px;zIndex:100;position:absolute;cursor:auto;" onmousedown="obj_lsdown('div1');" onmousemove="obj_move('div1');" onmouseup="obj_up('div1');">

    <table border="0" cellpadding="0" cellspacing="0" id="table1" width="100%" style="table-layout:fixed;">
                <tr>
                    <td bgcolor="#C0CFB2" id="div1td1" style="cursor:move;height:25px;" onmousedown="obj_down('div1');" >
                        <span style='float:left'>拖动拉缩窗体</span> <span style='float:right'><a href='javascript:closeDiv()'>关闭</a></span>
                    </td>
                </tr>
                <tr>
                    <td style="height:275px;" id="div1td2" bgcolor="#6666ff">
                       <span> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                     </span>
</td>
                </tr>
            </table>
        </div>

    </body>
</html>

0
顶

0
踩

分享到：

JS拖动层的实现 | java日期格式大全 format SimpleDateFormat

2009-08-23 19:27
浏览 1888
评论(2)
分类:Web前端
查看更多

2 楼 fuanyu 2010-07-20

建议你去用jquery。

1 楼 counters15 2010-07-19

firefox中还是event is not defined的问题

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论