Question

基本上我想尝试用HTML制作一个简单的迷你地图，但我无法弄明白。

有人可以给我一个样品吗？

只有2张相同但尺寸不同的图片。一个是小的，另一个是大的，如果你点击小图像的任何坐标，你点击的节目的大图像。

我还是HTML的新手，想要了解更多，只需要一个样本，这样我就可以分析如何制作它。

Answer 1

像我说的那样创建一个图像，在该图像上找到鼠标坐标。

创建一个具有相同图像的div并设置背景位置。

用图像替换YOURMAP。

var img,w,h,mu=true,map,MAP='YOURMAP';
function pos(e){
 var x=e.pageX-img.offsetLeft,y=e.pageY-img.offsetTop,
 left=((w/img.width*x)-(map.offsetWidth/2))*-1,
 top=((h/img.height*y)-(map.offsetHeight/2))*-1;
 map.style['background-position']=left+'px '+top+'px';
}
window.onload=function(){
 img=document.createElement('img');
 img.onload=function(){
  w=this.width;h=this.height;
  img.style.width='200px';
 }
 img.src=MAP;

 map=document.createElement('div');
 map.style.background='#000 url('+MAP+') no-repeat 0 0';
 map.style.width='200px';
 map.style.height='200px';

 document.body.appendChild(img);
 document.body.appendChild(map);

 img.addEventListener('mousedown',function(e){
  mu=false;pos(e);e.preventDefault()
 },false);
 img.addEventListener('mousemove',function(e){
  mu||pos(e)
 },false);
 img.addEventListener('mouseup',function(e){
  mu=true
 },false);
}

演示 http://jsfiddle.net/m3snq/3/或http://jsfiddle.net/m3snq/6/

如果你不明白，只要问......

如何在html中制作一个简单的迷你地图

1 个答案: