像地图一样移动图像

我正在尝试制作一个游戏的在线地图。但我在移动地图时遇到问题...像地图一样移动图像

此代码仅在将容器（div与地图图像）设置为height：6000px时才起作用;和宽度：6000px;

但我必须使用身高：100％;宽度：100％;获得“背景大小：封面”;工作有地图“缩小” /“适应屏幕”为最好看IMO

$(document).ready(function() 
    { 
     var 
      clicked, 
      clickY 
     ; 
     $(document).on(
     { 
      'mousemove': function(e) {clicked && updateScrollPos(e);}, 
      'mousedown': function(e) 
      { 
       clicked = true; 
       clickY = e.pageY; 
       clickX = e.pageX; 
      }, 
      'mouseup': function() 
      { 
       clicked = false; 
       $('html').css('cursor', 'auto'); 
      } 
     }); 

     var updateScrollPos = function(e) 
     { 
      $('html').css('cursor', 'all-scroll'); 
      $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY)); 
      $(window).scrollLeft($(window).scrollLeft() + (clickX - e.pageX)); 
     } 
    });

这是目前它的外观：http://5.231.49.167/map/ 使用“谷歌检查元素”来测试我的意思。（在#container中将100％更改为6000px）

来源

2014-02-10 user2703651

我不会在该链接中发现36kk像素的图像，对吧？ – elmigranto

问题是，当您设置100％高度值时，它将从父容器获取纵向长度。如果conatiner是人体标签，它会调整内容的大小，它可能非常小巧。例如，您需要将大小设置为指定的大小，您可以使用窗口大小。

来源

2014-02-10 20:53:49 chfumero

对不起，我没有理解你。你能提供一个你的意思的例子代码吗？ – user2703651

像地图一样移动图像

回答

相关问题