私がやろうとしているのは、ユーザーがページのどこかをクリックすると、ランダムな画像を含む div がクリックの位置に表示され、そこにとどまることです。これは、毎回異なる画像を表示して、繰り返すことができなければなりません。助言がありますか?
質問する
21917 次
2 に答える
25
これが実用的なフィドルです。
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;
}
于 2012-12-25T17:25:33.037 に答える
3
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});
});
})
于 2012-12-25T17:45:36.520 に答える