我正在尝试将图像添加到 div 并通过设置“left”和“top”css 规则随机分配它在 div 中的位置。
然后我希望图像在显示中淡入淡出一段时间,然后淡出并循环显示另一个位置的图像。
<div id="banner">
<img src="http://i.imgur.com/BqsAMv7.png" alt="pin drop" class="pin"/>
</div>
(function randomPin(){
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$pin.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( '#banner' ).fadeIn(500).delay(500).fadeOut(300, function(){
$(this).remove();
});
})();
演示 - JSfiddle
最佳答案
您没有定义divsize
和$pin
。此外,没有任何函数可以在每次将图钉放置在随机位置时调用。
建议如下代码:
(function randomPin(){
var $pin = $('.pin');
var $banner = $('#banner');
var divsize = [$banner.width() - $pin.width(), $banner.height() - $pin.height()];
function show() {
var posx = (Math.random() * (divsize[0])).toFixed();
var posy = (Math.random() * (divsize[1])).toFixed();
$pin
.css({
'left':posx+'px',
'top':posy+'px'
})
.fadeIn(500)
.delay(500)
.fadeOut(300, show);
}
show();
})();
#banner{
position: relative;
width: 500px;
height: 500px;
border: 1px solid black;
}
.pin {
position: absolute;
display: none;
}
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="banner">
<img src="http://i.imgur.com/BqsAMv7.png" alt="pin drop" class="pin"/>
</div>
这是 jsfiddle
关于javascript - 随机图像位置添加和删除循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26196146/