一种网页效果

像winform那样可以水平拉大拉小或者垂直拉大拉小。对角线也行

解决方案 »

  1.   

    记得微软提供的AJAXtoolkit里面有个，可以退拽和可放大缩小的层。
      

  2.   

    JS，如果要保存效果，可以用Cookie或是数据库
      

  3.   

    <!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; //设置为正在缩放
            }    
        }
        </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>拖动拉缩窗体</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="height:275px;" id="div1td2" bgcolor="#6666ff">
                            <span>内容</span>
                        </td>
                    </tr>
                </table>
            </div>
        </body>
    </html>
      

  4.   

    如果你说的不是IE之类的浏览器,你可以试下jquery.