如何根據鼠標位置調整div的大小？

我想做一個div，擴大左，右，上，下，取決於鼠標的位置。但是當我移動鼠標時，div彈出並沒有做任何事情。我在做什麼錯了？如何根據鼠標位置調整div的大小？

(function() { 
    document.onmousemove = function(e) { 
     draw(e); 
    }; 

    function draw(e) { 
     var method = [ 
      e.pageX ? e.pageX : e.clientX, 
      e.pageY ? e.pageY : e.clientY 
     ]; 
     var X = method[0], 
      Y = method[1]; 
     var html = '<div class="box" style="padding-top:' + Y + ';padding-bottom:' + Y + ';padding-left:' + X + ';padding-right:' + X + '"></div>' 
      ; 
     document.body.innerHTML = html; 
    } 
})();

來源

2012-02-22 0x499602D2

你不得不重新改寫DIV每次？ – locrizak 2012-02-22 14:08:48

如果Quentin的答案不起作用，那麼請在http://jsfiddle.net – Henesnarfel 2012-02-22 14:10:19

你忘了單元px：

(function() { 
    document.onmousemove = function(e) { 
     draw(e); 
    }; 

    function draw(e) { 
     var method = [ 
      e.pageX ? e.pageX : e.clientX, 
      e.pageY ? e.pageY : e.clientY 
     ]; 
     var X = method[0], 
      Y = method[1]; 
     var html = '<div class="box" style="background-color:red;padding-top:' + Y + 'px;padding-bottom:' + Y + 'px;padding-left:' + X + 'px;padding-right:' + X + 'px"></div>' 
      ; 
     document.body.innerHTML = html; 
    } 
})();

（我還添加了一個紅色的背景，以使DIV可見）

的jsfiddle：http://jsfiddle.net/8LUwp/

來源

2012-02-22 14:10:00 ComFreek

X和Y是數字。 CSS長度需要單位。加一些px。

來源

2012-02-22 14:08:37 Quentin

你失蹤PX後綴與x和Y

(function() { 
     document.onmousemove = function(e) { 
      draw(e); 
     }; 

     function draw(e) { 
      var method = [ 
       e.pageX ? e.pageX : e.clientX, 
       e.pageY ? e.pageY : e.clientY 
      ]; 
      var X = method[0], 
       Y = method[1]; 
      var html = '<div class="box" style="padding-top:' + Y +"px" + ';padding-bottom:' + Y +"px" + ';padding-left:' + X +"px" + ';padding-right:' + X +"px" + '"></div>' 
       ; 
      document.body.innerHTML = html; 
     } 
    })();

來源

2012-02-22 14:12:09

後綴上設置示例，而不是前綴。 – Quentin 2012-02-22 14:35:32

大錯別字:) – 2012-02-22 14:38:57

CSS長度屬性（填充，邊距，高度，寬度等）需要單位 - px，em等。因此只需要：

padding-top:10

無效。相反，你需要添加單位：

padding-top:10px

所以你的情況行設置HTML應改爲：

var html = '<div class="box" style="padding-top:' + Y + 'px;padding-bottom:' + Y + 'px;padding-left:' + X + 'px;padding-right:' + X + 'px"></div>';

來源

2012-02-22 14:15:09 lamplightdev

如何根據鼠標位置調整div的大小？

回答

相關問題