Question

在我的代码中，我在div中有一个包含地图区域的图像，并且根据从URL传递的变量，我希望图像最初放大在变量给定的区域上。我正在使用imagemapster进行交互式地图功能，虽然该JQuery插件确实具有调整大小功能，但它仅从左上角调整图像大小。我希望将图像调整大小到所选区域的位置，换句话说，初始区域缩放。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="jquery.min.js"></script>
<script src="imagemapster.js"></script>
<style type="text/css">
</style>
</head>
<body>
    <div style = "width:867px; height:1109px; border:0; overflow: auto; float:left;">
        <img name="front" src="zoo.png" style="max-width:100%;"  id="frontmap" usemap="#m_front" alt=""/>
    </div>
    <map name="m_front" id="m_front">
        <area id = "1" shape="poly" coords="56,45,57,257,468,46"  href="#" />
        <area id = "2" shape="poly" coords="519,166,697,324,699,186"  href="#" />
        <area id = "3" shape="circle" coords="397,533,224"  href="#" />
        <area id = "4" shape="rect" coords="647,730,725,851"  href="#" />
        <area id = "5" shape="rect" coords="118,765,280,855"  href="#" />
        <area id = "6" shape="rect" coords="271,862,683,1031"  href="#" />
    </map>
    <script>
        var i = "1";
        $(document).ready(function()
        {
            var image = $('#frontmap');
            image.mapster
            ({
                fillColor: '000000',
                fillOpacity: 0.8,
                staticState: false
            });
        });
    </script>
    </body>
</html>

我试图用CSS寻找解决方案，但大部分都没有达到我想要的效果，要么重新定位图像，要么裁剪区域。关于如何将图像初始缩放到我想要的区域的任何建议，并且仍然可以通过div滑块查看图像的其余部分？

Answer 1

您可以使用scrolleft和scrolltop滚动到您想要焦点的位置。就像在这个例子中一样：

$('div').scrollTop( 200 )
$('div').scrollLeft( 220 )

div {width: 200px; height: 200px; overflow: scroll}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><img src="http://texel.is/wp-content/uploads/2015/10/Schaap-800x445.jpg"></div>

HTML最初调整图像大小并更改位置

1 个答案: