Ранжирование позиции изображения с помощью JQuery и HTML

У меня есть это:

Я хочу, чтобы пролестные "верх" и "слева" менялись каждый раз, когда вы входите на страницу. Я имею в виду, что несколько раз он появляется в правом верхнем углу, в правом нижнем углу, в левом верхнем углу и в левом нижнем углу.

Вот что я попробовал: http://redzer.com.mx/tabla.html

2 ответа

Я бы, наверное, начинал с div, созданного как position:fixed и с display:none:

Затем используйте 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 в своих тегах, я предложил это решение.


Я думаю, что у меня есть именно то, что вам нужно.

ПРИМЕР

С 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);

});

licensed under cc by-sa 3.0 with attribution.