jQuery图像映射缩放

Question

jQuery图像映射缩放

4

我写了这个函数来在页面加载时重新调整元素的位置，如果用户调整浏览器窗口大小，也应该重新计算。当页面加载时，它能够正常工作，但当窗口大小被调整时，它不能正确地重新计算位置。我做错了什么？

var orig_width = jQuery("#imageMaps").attr("width");    

        function sizing() { 

              var pic = jQuery('#imageMaps');

              var curr_width =  pic.width();      

              if (orig_width > curr_width) {    
                var width_ratio = orig_width / curr_width;
              }

              else if (orig_width < curr_width) {
                  var width_ratio = curr_width / orig_width;
              }

              var width_ratio_dec = parseFloat(width_ratio).toFixed(2);        alert(width_ratio_dec);

            jQuery("area").each(function() {
            var pairs = jQuery(this).attr("coords").split(', ');
            for(var i=0; i<pairs.length; i++) {
                var nums = pairs[i].split(','); 
                for(var j=0; j<nums.length; j++) { 
                    if (orig_width > curr_width) {
                        nums[j] = nums[j] / width_ratio_dec; 
                    }
                    else if (orig_width < curr_width) {
                        nums[j] = nums[j] * width_ratio_dec; 
                    }
                    else if (orig_width == curr_width) {
                        nums[j]
                    }

                }
                       pairs[i] = nums.join(',');
            }
            jQuery(this).attr("coords", pairs.join(', '));
            }); 
        }

        jQuery(document).ready(sizing);
        jQuery(window).resize(sizing);

这是HTML代码：

    <img class="alignnone size-full wp-image-430" id="imageMaps" src="SItePlan.gif" width="1500" height="1230" alt="Toledo Beach Marina Map" usemap="#flushometer" border="0" />

<map name="flushometer" id="flushometer"> 

<area shape="circle" coords="515,313,11" href="#" alt="" />
<area shape="circle" coords="910,115,11" href="#" alt="" />
<area shape="circle" coords="948,130,11" href="#" alt="" />
<area shape="circle" coords="1013,126,11" href="#" alt="" />
<area shape="circle" coords="928,375,11" href="#" alt="" />
<area shape="circle" coords="1252,339,11" href="#" alt="" />
<area shape="circle" coords="434,638,11" href="#" alt="" />
<area shape="circle" coords="761,684,11" href="#" alt="" />
<area shape="circle" coords="462,744,11" href="#" alt="" />
<area shape="circle" coords="361,790,11" href="#" alt="" />
<area shape="circle" coords="341,802,11" href="#" alt="" />
<area shape="circle" coords="310,827,11" href="#" alt="" />
<area shape="circle" coords="721,774,11" href="#" alt="" />
<area shape="circle" coords="835,799,11" href="#" alt="" />
<area shape="circle" coords="784,813,11" href="#" alt="" />
<area shape="circle" coords="793,865,11" href="#" alt="" />
<area shape="circle" coords="880,864,11" href="#" alt="" />
<area shape="circle" coords="1033,872,11" href="#" alt="" />
<area shape="circle" coords="444,367,11" href="#" alt="" />

</map>

- MG1

当您在设置变量后（当浏览器调整大小时）立即使用console.log(curr_width);，您会得到什么？ - Jasper

4个回答

0

这是基于Archer提供的答案。

在我的情况下，我不仅需要调整图像映射的大小，还需要同时调整图像的大小以匹配容器。我通过匹配包含图像的div的大小来实现这一点。

//resize image map on jobs page
        var mapWidth = $("div#main").width();

        $("#imageMaps").one("load", function() {
            orig_width = $("#imageMaps").attr("width");   
            $("#imageMaps").attr("width", mapWidth);
            sizing();
        }).each(function() {
            if (this.complete) $(this).load();
        });

- Stan

0

看起来比例计算是基于图像的原始宽度，而坐标的重新计算是基于当前坐标。您应该捕获原始坐标（可能在多维数组中）进行检查，或在更改大小和映射后重置orig_width的大小。

- Bear In Hat

0

窗口调整大小事件不会调整图像大小。在 onWindowResize 中，您似乎希望调整图像大小，然后使用其新计算绘制点。

- sinemetu1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reinstate Monica Cellio · Accepted Answer

我假设你在窗口调整大小的同时也在调整图像大小。如果不是这样，那么这段代码就没有意义了。以下是您发布内容的整理后（我认为）可行的版本...

var orig_width = 0;

function sizing() { 
    if (orig_width == 0) return;

    var pic = $('#imageMaps');
    var curr_width =  pic.width();      
    var ratio = curr_width / orig_width;

    $("area").each(function() {

        var pairs = $(this).attr("coords").split(', ');

        for(var i=0; i<pairs.length; i++) {

            var nums = pairs[i].split(','); 

            for(var j=0; j<nums.length; j++) { 
                nums[j] = nums[j] * ratio; 
            }

            pairs[i] = nums.join(',');
        }
        $(this).attr("coords", pairs.join(","));
    }); 
    orig_width = curr_width;
}

$("#imageMaps").one("load", function() {
    orig_width = $("#imageMaps").attr("width");    
    $(window).resize(sizing);
}).each(function() {
    if (this.complete) $(this).load();
});

请注意，我仅使用ratio，因为您不需要知道图像是比原来大还是小 - 它只是不同或者相同（比率==1）。

唯一值得注意的是，在运行后它会设置orig_width = curr_width，以便在下次有调整大小事件时从图像的当前大小计算比率而不是其原始大小。