Question

我在文档上绘制一个div，但它只在宽度和高度为正值时才有效：

var div;

function onMouseMove (e) {
    div.height(parseInt(e.pageY) - parseInt(div.css("top")) );
    div.width( parseInt(e.pageX) - parseInt(div.css("left")));
    console.log(div.width());
    console.log(div.height());
};

$(document).on("mousedown", function(e){
    div = $("<div></div>").prependTo("body");
    div.css({
        "top": e.pageY,
        "left": e.pageX
    });
    $(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function(){
    setTimeout(function(){
        div.remove();
    }, 1000);
    $(this).off("mousemove", onMouseMove);
});

fiddle here

当宽度和高度变为负值时，我该如何工作？

提前致谢。

Answer 1

CSS / HTML标准不接受负高度和宽度。如果它小于0，大多数网络浏览器都会完全忽略该值。具有负高度/宽度是没有意义的。

如果您正在尝试＆＃34;反向＆＃34; div或翻译它，我建议使用CSS3 transform属性，甚至可能使用负边距（尽管不鼓励这些）。

您可以指定以下内容：

transform: translateY(-50px);

或

transform: rotateY(30deg);

或

margin: -50px 0 0 0; /* this acts the same as the first transform */

在计算大小和位置后，在页面上移动。因此，例如，对于＆＃34;反向＆＃34; div向上，你可以围绕它的x轴旋转div，导致整个div看起来翻转。

请注意，虽然这可以单独使用，但如果您想要对这些转换进行更多3D外观，则需要使用具有viewport: [amount]px;属性的包装div。

希望这有帮助！

Answer 2

您需要添加Math.abs并执行以下操作：

var div;
var startX = 0 / 1;
var startY = 0 / 1;

function onMouseMove(e) {
  div.height(Math.abs(parseInt(e.pageY)-parseInt(div.css("top"))));
  div.width(Math.abs(parseInt(e.pageX) - parseInt(div.css("left"))));


  if (parseInt(e.pageY) < startY) {
    div.css({
        "top": e.pageY
    });
   div.height(Math.abs(parseInt(e.pageY)-startY));
  }
 if (parseInt(e.pageX) < startX) {
    div.css({
        "left": e.pageX
    });
        div.width(Math.abs(parseInt(e.pageX) - startX));
}

  console.log(div.width());
  console.log(div.height());
  console.log(e.pageX + '<--x y--> ' + e.pageY)
};

$(document).on("mousedown", function (e) {
div = $("<div></div>").prependTo("body");
startX = parseInt(e.pageX);
startY = parseInt(e.pageY);
div.css({
    "top": e.pageY,
        "left": e.pageX
});
$(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function () {
setTimeout(function () {
    div.remove();
}, 1000);
$(this).off("mousemove", onMouseMove);
});

fiddle example

如何解决＆＃34;否定＆＃34;高度和宽度？

2 个答案: