将同一个 div 中的 5 个点放置在与图像重叠的位置？

发布于 2024-12-15 05:30:44 字数 373 浏览 0 评论 0原文

你好，我试图让一排点重叠图像以显示路线，我可以使用以下代码定位一个点：

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]});

});

这将点精确地定位在图像上，但我需要重复它，而无需我为同一变量制作多个 div ？

这附近还有吗？

如果工作的话，我可以在更改幻灯片的值时使用滑块浏览点数组，将其从蓝色更改为红色吗？

原文

Hi im trying to get a row of dots to overlap a image to show a route, i can position one dot with this code:

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]});

});

this positions the dot exactly over the image but i need it to repeat without me making mutiple divs for the same variable?

is there anyway around this?

and if working could i use a slider to go through the array of dots to change it from blue to red when changing the value of the slide?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弥繁 2024-12-22 05:30:44

不管怎样，您需要创建多个元素。如果您需要对每个点进行单独控制，那么您可能需要使用唯一的 ID 生成它们。如果您只需要将它们作为一个整体进行操作，那么您无需 ID 即可逃脱。

使用 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/

One way or another, you'll need to make multiple elements. If you need individual control over each dot, then you'll probably want to generate them all with unique IDs. If you only ever need to manipulate them as a group, you can get away without the IDs.

With jQuery, it's pretty easy to generate elements on the fly, like so:

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');
}

I made a working demo for you, including a way to change colors, here:

http://jsfiddle.net/eCEfd/

回复收藏 0 原文

~没有更多了~