如何在窗口上动态显示div

Question

当我点击屏幕的任何一点时，我需要在点击点上显示div如何执行此操作。用例子解释我

Answer 1

示例： http://jsfiddle.net/patrick_dw/erG9Q/

$(document).click(function(e) {
    $( "<div class='mydiv'></div>" ).offset({top:e.pageY,left:e.pageX} )
                                    .appendTo(document.body);
});

CSS

div.mydiv {
    width: 50px;
    height: 50px;
    position: absolute;
    background: orange;
}

• 将a .click() handler分配给document
• 在处理程序中，create a new element $( "<div class='mydiv'></div>" )
• 将其page .offset()设置为点击.offset({top:e.pageY,left:e.pageX} )
的点
• .appendTo()页面.appendTo(document.body)

Answer 2

使用clientX和clientY获取鼠标位置。这是一个简单的例子：

$(window).click(function(e)
{
    var div = $("<div style='position: absolute; width: 10px; height: 10px; background: red;'>hello</div>");
    div.css('top', e.clientY);
    div.css('left', e.clientX);

    div.appendTo("body");
});

演示here。