我正在考虑如何向图像添加一些标记(我的意思是像谷歌地图中的东西 - 地点标记)。我有一个图像,如果用户单击该图像,我想在用户单击的那个地方添加一些其他图像。例如,如果用户单击图像中的 3 个位置,我想在这 3 个位置上添加我的图像...
我知道,如何获取方向、用户点击的位置,但我不知道,如何在这些地方添加我的图像......
需要 AJAX 吗?
所以我想向您寻求帮助,我会针对每个提示进行适当的处理。
谢谢。
有几种方法可以做到这一点,例如,您可以简单地将图像设置为某些 div 的背景(也可以使用position: relative;
在该 div 上)然后单击您可以创建/移动/显示其他图像,设置position: absolute;
并将其定位为top
and left
.
CSS 示例:
#container {
background: green;
width: 1000px;
height: 500px;
position: relative;
}
#container img {
position: absolute;
}
HTML 示例:
<div id="container"></div>
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>');
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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)