2

我正在寻找一种在页面上任意位置随机放置 div 的方法（每次加载一次）。

我目前正在编写一个基于 PHP 的幻想宠物模拟游戏。游戏中不常见的物品之一是“四叶草”。目前，用户通过随机分发获得“四叶草”——但我想改变它（它的交互性不够！）。

我正在尝试做的事情：

这个想法是让用户通过将这张图片随机放置在页面上的任何位置来搜索这些“四叶草”：（这个图片我对四叶草的演绎）

我想使用生成 div 的 Java/Ajax 脚本来执行此操作，然后将其放置在页面上的任何位置。并且一旦放置就不会移动它，直到重新加载页面。

我已经尝试了很多 Google 搜索，到目前为止我发现的最接近的是this (click)，来自this question。但是，删除 .fadein、.delay 和 .fadeout 会使脚本完全停止工作。我绝不是 Ajax 的专业人士。我想要做的甚至可能吗？

4

3 回答 3

6

在 javascript 中，您可以生成一个介于 0 和 1 之间的随机数var randomNumber = Math.random();

如果你给你的 div 绝对定位，你可以这样做

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

这会将其设置在随机位置。通过将左侧和顶部 CSS 属性设置为 0 到 100 之间的随机百分比。

于 2012-07-03T09:14:06.440 回答
2

这仍然有效。只需使用 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-03T09:18:02.177 回答
0

如果第一个链接适合您，请不要删除淡入淡出它会显示元素。或者删除 'display':'none' 然后你可以删除你写的所有内容。

于 2012-07-03T09:16:41.203 回答