高分求助：鼠标拖动DIV的边框，改变其大小，能否实现？

<div style="background:blue;position:absolute;left:100;top:100;width:300;height:300" onmousemove="this.style.width=event.clientX-90;this.style.height=event.clientY-90"></div>

解决方案 »

  1.   

    seabell(百合心)我试过了，不行啊
      

  2.   

    不足你自己改下吧<html>
    <head>
    <title>无标题</title>
    <head>
    <body>
    <script language ='javascript'>
    <!--
    var down = 0;
    var out = 1;
    function movestart()
    {
     lineborder.setCapture();
     down = 1;
     out = 1;
    }function moving()
    {
     if(down && out){
       lineborder.style.width = event.x - lineborder.offsetLeft;
       lineborder.style.height = event.y - lineborder.offsetTop;
     }
    }function moveend()
    {
     down = 0;
     lineborder.releaseCapture();
    }
    //-->
    </script>
    <span id=lineborder style="width:100px; height:100px; border-top:0px; border-left:0px; border-bottom:2px solid red; border-right:2px solid red; cursor :crosshair;" onmousedown="movestart()" onmousemove="moving()" onmouseup="moveend()">
    <img src="sss.gif" style="width:100%; height:100%; height:100%; cursor :auto;" id=theimg onmouseover="out=0"; onmousedown="out=0" onmouseup="out=1" onmouseout="out=1">
    </span></body>
    </html>
      

  3.   

    改下以免在拉小于0时还给宽高值,出错,但是不能拉高到0 ,奇,瞧中,<html>
    <head>
    <title>无标题</title>
    <head>
    <body style="margin: 0px 0px 0px 0px;">
    <script language ='javascript'>
    <!--
    var down = 0;
    var out = 1;
    function movestart()
    {
     lineborder.setCapture();
     down = 1;
     out = 1;
    }function moving()
    {
     if(down && out){
       lineborder.style.width = (xx = event.x - lineborder.offsetLeft) > -1 ? xx : lineborder.style.width;
       lineborder.style.height = (xx = event.y - lineborder.offsetTop) > -1 ? xx : lineborder.style.height;
     }
    }function moveend()
    {
     down = 0;
     lineborder.releaseCapture();
    }
    //-->
    </script>
    <span id=lineborder style="width:100px; height:100px; border-top:0px; border-left:0px; border-bottom:2px solid red; border-right:2px solid red; cursor :crosshair;" onmousedown="movestart()" onmousemove="moving()" onmouseup="moveend()">
    <img src="sss.gif" style="width:100%; height:100%; height:100%; cursor :auto;" id=theimg onmouseover="out=0"; onmousedown="out=0" onmouseup="out=1" onmouseout="out=1">
    </span></body>
    </html>
      

  4.   

    搞定,原来是行的字高要设为0才能,
    <html>
    <head>
    <title>无标题</title>
    <head>
    <body style="margin: 0px 0px 0px 0px;">
    <script language ='javascript'>
    <!--
    var down = 0;
    var out = 1;
    function movestart()
    {
     lineborder.setCapture();
     down = 1;
     out = 1;
    }function moving()
    {
     if(down && out){
       lineborder.style.width = (xx = event.x - lineborder.offsetLeft) > -1 ? xx : lineborder.style.width;
       lineborder.style.height = (xx = event.y - lineborder.offsetTop) > -1 ? xx : lineborder.style.height;
     }
    }function moveend()
    {
     down = 0;
     lineborder.releaseCapture();
    }
    //-->
    </script>
    <br><BR><span id=lineborder style="font-size:0px; width:100px; height:100px; border-top:0px; border-left:0px; border-bottom:2px solid red; border-right:2px solid red; cursor :crosshair;" onmousedown="movestart()" onmousemove="moving()" onmouseup="moveend()"><input type=image src="http://msdn.microsoft.com/library/toolbar/3.0/images/banners/msdn_masthead_ltr.gif" style="width:100%; height:100%; cursor :auto;" id=theimg onmouseover="out=0"; onmousedown="out=0" onmouseup="out=1" onmouseout="out=1"></span></body>
    </html>
      

  5.   

    qidizi(qidizi)的可以但是和我的代码不能放一起阿我的层也用到onmouseover，onmousedown，onmouseup事件
      

  6.   

    我只是给你思路,代码你可以自己来呀,建一个最底层,最好用span,DIV自占一行,
    此层提供下面和右面的框线,再在这个层上有一个层,占底层100%,这样就只是露出底层的下右边,
    然后要定事件,要是用户按住框线但不按到上面的层就可以改变大小
      

  7.   

    不是onmouseover
    而是onmousemove如果是针对图片最好不用js，因为不是矢量的，可以用vml等http://community.csdn.net/Expert/topic/4249/4249355.xml?temp=.3315851http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htmhttp://www.aiiiq.com/tp/js/winmy9.htmlhttp://www.aiiiq.com/tp/js/moveborder.html
    <table style='position:absolute; top:100; left:200; width:300; height:400; background-color:red; z-index:1; border:1 solid blue; TABLE-LAYOUT:fixed; WORD-BREAK:break-all;' cellspacing='0'>
    <tr style='display:none'><td></td><td style='width:12;'></td></tr> <!-- 固定resize单元格宽度 -->
    <tr>
    <td style='cursor:default;' colspan='2' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
    title
    </td>
    </tr>
    <tr>
    <td style='background-color:white; height:100%' valign='top' colspan='2'>
    <img src='http://community.csdn.net/images/CSDN_logo.GIF' style='width:100%'>
    </td>
    </tr>
    <tr>
    <td style='background-color:white;'></td>
    <td style='cursor:se-resize; height:12;' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)></td>
    </tr>
    </table><script>
    /**
    * obj当前单元格，move动作标记
    */
    var move; function Down(obj){
    move = 1;
    obj.x = event.x; //鼠标起始位置
    obj.y = event.y;
    obj.l = obj.offsetParent.offsetLeft; //父元素当前位置
    obj.t = obj.offsetParent.offsetTop;
    obj.w = obj.offsetParent.offsetWidth;
    obj.h = obj.offsetParent.offsetHeight;
    obj.setCapture(); //得到鼠标
    } function Remove(obj){
    if(move != null){
    /**
    * 新的父元素位置 = 鼠标当前位置 - 鼠标起始位置 + 父元素当前位置
    */
    obj.offsetParent.style.left = event.x - obj.x + obj.l;
    obj.offsetParent.style.top = event.y - obj.y + obj.t;
    }
    } function Resize(obj){
    if(move != null){
    obj.offsetParent.style.width = event.x - obj.x + obj.w;
    obj.offsetParent.style.height = event.y - obj.y + obj.h;
    }
    } function Up(obj){
    move = null;
    obj.releaseCapture(); //释放鼠标
    }</script>