jQuery – 如何为图像添加标记

我正在考虑如何为图像添加一些标记（我的意思是谷歌地图中的标记 – 地方标记）。 我有一个图像，如果用户点击这个图像，我想在那个地方，用户点击，添加一些其他图像。 例如，如果用户点击图像中的3个位置，我想在此添加3个我的图像…

我知道，如何获取方向，用户点击的位置，但我不知道，如何在那些地方添加我的图像…

需要AJAX吗？

所以我想问你一些帮助，我会适合每一个提示。 谢谢。

Answer 1

有几种方法可以做到这一点，例如你可以简单地将图像设置为某个div的背景（也使用position: relative;在该div上）然后点击你可以创建/移动/显示其他图像，设置position: absolute; 它和top和left 。

示例CSS：

 #container { background: green; width: 1000px; height: 500px; position: relative; } #container img { position: absolute; } 

示例HTML：

示例JS（使用jQuery）：

 $(document).ready(function() { $("#container").click(function(e) { e.preventDefault(); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var img = $(''); img.css('top', y); img.css('left', x); img.attr('src', 'http://img34.imageshack.us/img34/3337/imglp.png'); img.appendTo('#container'); }) }); 

工作示例http://jsfiddle.net/uKkRh/1/