Question

我正在寻找一种方法来使我的动态缩放图像与我正在制作的图像映射相匹配。我正在使用jquery来缩放窗口大小的图像：

$(window).bind("load resize", function(){

        $(".post img").height($(window).height()-110);
        $(".post img").width(($(".post img").newHeight() / $(".post img").oldHeight()) * $(".post img").oldWidth());

});

但是我使ImageMaps坚持原始尺寸。我正在寻找ImageMapster，但无法弄清楚如何自动缩放所有图像映射。

这是它的页面： http://www.dersuawesome.com/home/

Answer 1

在 imagemapster 中，您使用：$（'img'）。mapster（'resize'，width，height，duration）;

来自原始imagemapster文档的引用：

$（ 'IMG'）mapster（ '调整大小'，宽度，高度，持续时间）。 --- 图像：图像的新宽度或高度：图像的新高度持续时间:(可选）0 |毫秒（为调整大小设置动画）这会将图像映射调整为指定的尺寸。请注意，宽度＆gt;或高度应该通过，另一个将通过以与原始图像相同的纵横比计算。如果你通过两者，只有宽度将用于计算新的尺寸：比例必须与原始图像保持一致。

引用结束。例如。当图像变为900像素宽时，您可以使用：

$('img').mapster('resize',900,null,2000);

在这里，我告诉imagemapster使用2000毫秒来调整大小以获得平滑的效果。把它放到代码的onconfigure-section部分对我来说很有用：

onConfigured: function(){
         $('img').mapster('resize',900,null,2000);
        } ,

缩放图像映射与动态大小的图像协调

1 个答案: