开发者

How to display div dynamically on window

开发者 https://www.devze.com 2023-01-31 23:25 出处:网络
When i click on any point of screen i n开发者_如何学Pythoneed to display a div on clicked point how to do this. explain me with exampleExample: http://jsfiddle.net/patrick_dw/erG9Q/

When i click on any point of screen i n开发者_如何学Pythoneed to display a div on clicked point how to do this. explain me with example


Example: 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;
}
  • Assign a .click() handler to the document
  • In the handler, create a new element $( "<div class='mydiv'></div>" )
  • Set its page .offset() to the point of the click .offset({top:e.pageY,left:e.pageX} )
  • .appendTo() the page .appendTo(document.body)


Use clientX and clientY to get the mouse position. This is a simple example:

$(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");
});

Demo here.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号