Размещение 5 точек из одного div, перекрывающих изображение?

#javascript #arrays #slider #position

#javascript #массивы #ползунок #расположение

Вопрос:

Привет, я пытаюсь получить ряд точек, которые будут перекрывать изображение, чтобы показать маршрут, я могу расположить одну точку с помощью этого кода:

 var dotPosition_X = new Array();
var dotPosition_Y = new Array();

dotPosition_X[1] = 10;
dotPosition_Y[1] = 40;

$("#reddot").offset({ top: dotPosition_Y[1], left: dotPosition_X[1]});

});

это позиционирует точку точно над изображением, но мне нужно, чтобы это повторялось без того, чтобы я делал несколько divs для одной и той же переменной?

есть ли что-нибудь вокруг этого?

и если работает, могу ли я использовать ползунок для перемещения по массиву точек, чтобы изменить его с синего на красный при изменении значения слайда?

1. Вы хотите клонировать точку?

2. если вы хотите 5 точек, вам нужно 5 объектов, они могут быть, например, div: s или img: s

3. Да, я хотел бы клонировать одну и ту же точку несколько раз в разных положениях (следуя маршруту)

Ответ №1:

Так или иначе, вам нужно будет создать несколько элементов. Если вам нужен индивидуальный контроль над каждой точкой, то вы, вероятно, захотите сгенерировать их все с уникальными идентификаторами. Если вам когда-либо понадобится манипулировать ими только как группой, вы можете обойтись без идентификаторов.

С помощью jQuery довольно легко генерировать элементы «на лету», вот так:

 var dots = new Array();
for(var i=0;i<5;i  ) {
    var $dot = $('<div class="dot" />');
    $dot.css({ top: dotPosition_Y[i], left: dotPosition_X[i]});
    $dot.appendTo('#map');
}

Я сделал для вас рабочую демонстрацию, включая способ изменения цветов, здесь:

http://jsfiddle.net/eCEfd/