Question

我有这个：

<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>

我希望每次进入页面时，“top”和“left”的属性都会改变。我的意思是有时它出现在右上角，右下角，左上角和左下角..

这是我试过的： http://redzer.com.mx/tabla.html

Answer 1

我可能会将div设为position:fixed和display:none：

<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>

然后使用jQuery确定要设置的位置CSS并打开可见性

$(document).ready(function() {
    // get jQuery object for the div
    var $randomp = $('#randomp');
    // determine whether to show top or bottom, left or right
    var top = Math.round(Math.random()); // generate 0 or 1 value
    if (top === 1) {
        $randomp.css('top', '3px');
    } else {
        $randomp.css('bottom', '3px');
    }       
    var left = Math.round(Math.random());
    if (left === 1) {
        $randomp.css('left', '3px');
    } else {
        $randomp.css('right', '3px');
    }
    // show the div
    $randomp.show();
});

当然，您也可以使用服务器端代码来执行此操作，但由于您在标签中专门询问了javascript / jquery，我建议使用此解决方案。

Answer 2

我想我得到了你所需要的。

<强> EXAMPLE

使用javascript我每次访问页面时都会为图像的左上角和左上角生成随机数。现在我将它们设置为0到100之间的随机数，但你可以将它改为你想要的任何数字。

var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);

$(document).ready(function () {

    $('#randomp').css('top', random1);
    $('#randomp').css('left', random2);

});

使用JQuery和HTML随机化图像位置

2 个答案: