随机img位置添加&移除循环

Random img location add & remove loop

本文关键字：循环 amp img 位置 添加 随机      更新时间：2023-09-26

我试图将图像添加到div中，并通过设置"left"&"top"css规则。

然后，我希望图像在显示中淡出一段时间，然后淡出并循环显示在另一个位置。

<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

相关文章：