То, что я пытаюсь сделать, - когда пользователь нажимает где-то на странице, div, содержащий случайное изображение, будет отображаться в позиции щелчка и остается там. Это должно быть возможно повторить, каждый раз отображая другое изображение. Любые предложения?
Создайте DIV рядом с позицией курсора при щелчке
Ответ 1
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;
}
Ответ 2
Со случайными изображениями от 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});
});
})