무작위로 한 위치를 지정

페이지 임의의 위치에 div를 임의로 배치하는 방법을 찾고 있습니다 (로드 당 한 번).무작위로 한 위치를 지정

저는 현재 PHP 기반 환상의 애완 동물 시뮬레이션 게임을 프로그래밍하고 있습니다. 게임에서 흔히 볼 수없는 아이템 중 하나는 "네잎 클로버 (Four Leaf Clover)"입니다. 현재 사용자는 무작위 배분을 통해 "Four Leaf Clovers"를 얻습니다.하지만이를 변경하고 싶습니다 (충분히 대화식이 아닙니다!). 네 잎 클로버의 this image (내 연주를 :

아이디어는 사용자가 임의로 어디서나 페이지에 이미지를 배치하여 이러한 "네 잎 클로버"를 검색하는 것입니다 : 내가 뭘하려고 오전

)

div를 생성하는 Java/Ajax 스크립트를 사용하여이 작업을 수행하고 싶습니다. 그런 다음 페이지의 아무 곳에 나 배치하십시오. 페이지가 다시로드 될 때까지 배치 된 후에는 이동하지 않습니다.

나는 많은 Google 검색을 시도했으며, 지금까지 발견 한 바로는 this (click), 즉 this question입니다. 그러나 .fadein, .delay 및 .fadeout을 제거하면 스크립트가 완전히 작동하지 않습니다. 저는 Ajax와 프로가 아닙니다. 내가 할 수있는 일이 가능한거야? 당신이 당신의 사업부 절대 위치를 줄 경우

출처

2012-07-03 Connie

이 경우 아약스는 필요하지 않으며 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

고마워, 카니! – Connie

마지막 질문이 하나 있습니다. (바보 같을 수도 있습니다.) ... 태그에 링크를 추가하면 어디에서 링크가 생깁니 까? (그래서 무작위 상자가 아니라 대화식 클로버 이미지가됩니다)? – Connie

간단히 다음을 추가하십시오 : $ newdiv.html ('') – Kani

자바 스크립트에서 당신은 당신이 다음

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

이가 임의의 위치에 설정합니다 할 수있는, var randomNumber = Math.random();

사용하여 0과 1 사이의 임의의 숫자를 생성 할 수 있습니다. 좌측 및 상단 css 속성을 0에서 100 사이의 임의 비율로 설정합니다.

출처

2012-07-03 09:14:06

첫 번째 링크는 적합합니다. 요소에 나타나는 페이드 인을 제거하지 마십시오. 또는 'display'를 제거하십시오. 'none'을 입력하면 작성한 모든 내용을 제거 할 수 있습니다.

출처

2012-07-03 09:16:41 snoblucha

무작위로 한 위치를 지정

답변

관련 문제