Question

我正在尝试为游戏制作在线地图。但是我在地图上移动时遇到了问题...

此代码仅在我设置容器（div与地图图像）时有效高度：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）

Answer 1

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

像地图一样移动图像

1 个答案: