Question

我正在尝试将图像添加到div中并通过设置“left”＆amp ;,随机分配div中的位置。 “顶级”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();
}); 
})();

DEMO - 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

随机img位置添加＆amp;删除循环

1 个答案: