Question

我有一个jQuery函数来创建一个简单的div，代码如下 - var mouseX; var mouseY;

$(document).mousemove(function (e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

function createObj() {
  var o = $('<div />');
  o.addClass('myDiv');
  o.css({'top':mouseY,'left':mouseX}).fadeIn('slow');
  $(document.body).append(o);
}

我的问题是第一个div是在请求的位置创建的，但是如果我再次调用该函数来创建另一个div，则会在第一个div下面创建，下一个在第二个div之下创建。

如何在当前鼠标位置创建新div？

Answer 1

此代码正在执行您希望它执行的操作，您无法分辨div是在顶部还是在彼此之下，因为它们具有相同的颜色。

此代码为每个新div创建一个随机颜色，以便您可以看到新的div实际上位于旧的div之上：

var colors = ["blue", "red", "lime", "purple"];
color = colors[Math.floor(Math.random()*colors.length)];

$(document).mousemove(function (e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

function createObj() {
  var o = $('<div />');
  o.addClass('myDiv');
  o.css({'top':mouseY,'left':mouseX, background: color}).fadeIn('slow');
  $(document.body).append(o);
  color = colors[Math.floor(Math.random()*colors.length)];
}
$(document).click(createObj);

DEMO

定位使用jQuery创建的div元素

1 个答案: