隨機img位置添加和刪除循環

我想要添加一個圖像到div，並通過設置「左」&「頂部」CSS規則隨機分配其位置。隨機img位置添加和刪除循環

然後，我希望圖像淡入顯示一段時間後消失，並循環顯示一個在另一個位置。

<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

來源

2014-10-04 Sam

是什麼'divsize'？ – 2014-10-04 19:06:23

圖像的大小（來自舊的嘗試），我猜想更改爲39px＆52px – Sam 2014-10-04 19:11:40

而您在哪裏定義它？ – 2014-10-04 19:12:22

你沒有定義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

來源

2014-10-04 19:36:32 friedi

隨機img位置添加和刪除循環

回答

相關問題