4

動的にスケーリングされた画像を、作成中の画像マップに適合させる方法を探しています。ウィンドウサイズで画像をスケーリングするためにjqueryを使用しています：

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

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

});

しかし、私が作成する ImageMap は元のサイズに忠実です。ImageMapster を調べていますが、すべてのイメージマップを自動的にスケーリングする方法がわかりません。

これが対象のページです: http://www.dersuawesome.com/home/

4

1 に答える 1

3

imagemapsterでは、次を使用します: $('img').mapster('resize',width,height,duration);

元の imagemapster ドキュメントからの引用:

$('img').mapster('resize',width,height,duration); --- image: 画像の新しい幅 OR height: 画像の新しい高さ duration: (オプション) 0 | ミリ秒 (サイズ変更をアニメーション化するため) これにより、イメージ マップのサイズが指定されたサイズに変更されます。width > または height のいずれかを渡す必要があり、もう一方は元の画像と同じ縦横比で計算されることに注意してください。両方を渡すと、幅のみが新しい寸法の計算に使用されます。縦横比は元の画像と同じでなければなりません。

引用終わり。例えば。画像の幅が 900 ピクセルになる必要がある場合は、次を使用します。

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

ここでは、滑らかな効果を得るために、このサイズ変更に 2000 ミリ秒を使用するように imagemapster に指示しました。これをコードの onconfigured-section に入れるとうまくいきます。

onConfigured: function(){
         $('img').mapster('resize',900,null,2000);
        } ,
于 2012-07-29T07:08:47.887 に答える