Создать DIV рядом с позицией курсора при щелчке

то, что я пытаюсь сделать, это когда пользователь нажимает где-то на странице, div, содержащий случайное изображение, будет отображаться в положении щелчка, и он остается там. Это должно быть возможно повторить, показывая каждый раз другое изображение. Есть предложения?

12
css3 html5 javascript javascript-events jquery

2 ответов

вот рабочая скрипку.

JS:

$(function(){
    var fadeDelay = 1000;
    var fadeDuration = 1000;
    $(document).click(function(e){
        var div = $('<div class="image-wrapper">')
            .css({
                "left": e.pageX + 'px',
                "top": e.pageY + 'px'
            })
            .append($('<img src="" alt="myimage" />'))
            .appendTo(document.body);

        setTimeout(function() {
            div.addClass('fade-out');           
            setTimeout(function() { div.remove(); }, fadeDuration);
        }, fadeDelay);
    });
});

CSS:

body {
    position: relative;
}

.image-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.image-wrapper.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
20

со случайными изображениями от 1 до 10:

jQuery(document).ready(function(){
  $(document).click(function(e){
    var num = Math.floor((Math.random()*10)+1);
    var img = $('<div>Image '+num+':<img src="image' + num + '.png" /></div>');
    $("#img_container").html(img).offset({ top: e.pageY, left: e.pageX});
  });
})

демо

3