javascript - 随机图像位置添加和删除循环

Question

我正在尝试将图像添加到 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

Answer 1

您没有定义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