隨機位置A Div

我正在尋找一種方法來隨機在頁面上的任何位置（每負載一次）放置一個div。隨機位置A Div

我目前正在編寫一個基於PHP的幻想寵物模擬遊戲。遊戲中罕見的項目之一是「四葉草」。目前，用戶通過隨機分配獲得「四葉草」，但我想改變它（它不夠交互！）。

我所試圖做的事：

的想法是讓用戶通過隨機將這個圖片頁面上的任何地方尋找這些「四葉草」： this image （我的四片葉子的三葉草的再現）

我想使用生成div的Java/Ajax腳本執行此操作，然後將其放置在頁面的任何位置。一旦放置完畢，它就不會移動，直到頁面重新加載。

我已經嘗試了很多Google搜索，並且迄今爲止發現的最接近的東西是this (click)，從this question。但是，刪除.fadein，.delay和.fadeout會阻止腳本完全運行。我絕不是一個專業的Ajax。我試圖做甚至可能嗎？

來源

2012-07-03 Connie

你不需要ajax，只有jquery/javascript。當然這是可能的。我建議你發佈你在jsFiddle中創建的代碼，所以幫助你更容易。 – Th0rndike

生成兩個隨機數，爲絕對定位的div的頂部和左側邊緣設置這些數字。 –

@ Th0rndike - 這是一種解脫！ Java對我來說很容易理解！關於如何編寫這樣的代碼的任何想法？ =） – Connie

這仍然有效。只需使用makeDiv（）創建一個新的。

function makeDiv(){ 

var divsize = ((Math.random()*100) + 50).toFixed(); 
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
$newdiv = $('<div/>').css({ 
    'width':divsize+'px', 
    'height':divsize+'px', 
    'background-color': color 
}); 

var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

$newdiv.css({ 
    'position':'absolute', 
    'left':posx+'px', 
    'top':posy+'px', 
    'display':'none' 
}).appendTo('body').fadeIn(100); 
}; 

makeDiv();

來源

2012-07-03 09:18:02 Kani

非常感謝你，Kani！ – Connie

雖然我確實有最後一個問題（它可能是愚蠢的），...我應該在哪裏添加帶有鏈接的標記（以便它不僅僅是一個隨機框 - 而是交互式三葉草圖像）？ – Connie

只需添加： $ newdiv.html（''）函數 – Kani

在javascript中您可以使用var randomNumber = Math.random();

產生0和1之間的一個隨機數，如果你給你的DIV絕對定位，那麼你可以做

div.style.top = (100*Math.random()) + "%"; 
div.style.left = (100*Math.random()) + "%";

這將設置一個隨機位置。通過設置左和頂部的CSS屬性爲0和100之間的隨機百分比。

來源

2012-07-03 09:14:06

它的第一個鏈接適合你，不要刪除淡入淡出它顯示的元素。或者刪除'display'：'none'，然後你可以刪除你寫的所有內容。

來源

2012-07-03 09:16:41 snoblucha

回答

相關問題