2

中央に配置したまま、jQueryを使用して画像を拡大しようとしています。'right'アニメーションプロパティを追加しようとしましたが、役に立ちませんでした。

これがページのライブバージョンです。StudentまたはGuestをクリックして、アニメーションを表示します。

jQuery：

var studFocusWidth = 1000;
var studFocusChange = 165;
var chartSpeed = 700;

function goToStud() {
    $('#chart').attr("usemap", "studmap")
    .animate({
        'width': studFocusWidth,
        'right': studFocusChange
    }, chartSpeed)
    .attr("src", "images/chartsfocus.png");

    $('h3').html("Select a Section");
    $('#chartback').addClass("studback").fadeIn(chartSpeed);

}

// There is a second function for the guest section

HTML：

<div id="chartframe">
    <!-- image maps omitted -->
    <img id="chart" src="images/chartstart.png" usemap="#chartmap" alt="Chart" />
</div>

CSS：

#chartframe {
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0px;
}

#chart {
    width:640px;
    position: relative;
}
4

1 に答える 1

3

jsFiddleZOOMデモ

チャットを含む以前のコメントによると、28非常に大きな画像（@ 1792 x 1054 ）を小さな画像に変更すると、それらの画像の読み込み時間が長くなるだけでなく（28枚の画像で14 MB）、視覚的なアーティファクトを防ぐのにも役立ちます画像を交換しますimage map（つまり、座席エリアの写真）。

定義した最大幅は600pxであるため、画像の幅に必要な正確なサイズは、使用するズームの量によって異なります。そのため、そのズームレベルで使用しても、視覚的な品質が維持されます。一般的な例として、画像をズームする場合、画像200%の最大幅は1200px（600px2倍、ここで、は固定された600pxコンテナです）になります。divwidth

ほとんどの場合、それほど大きくズームしないので、最終的な幅の計算にはパーセンテージを使用します。ズームが25％大きい場合は、600px times 25% which gives you 150pxそれ150pxがコンテナに追加されdiv width of 600px、画像の幅がになり750pxます。不要な画像データを削り取っただけです。 1000pxwidth

現在使用しているjQueryズームアニメーションwidthに関しては、との両方を同時にアニメーション化するのが正しいですheight。ただし、ズームしているため、のセンタリングは解決されませんimage map。これにより、位置ずれが視覚的に目立ちます。

その場合の最善の解決策は、チャットでのコメントによると、からに進み、CSSプロパティを介してズーム技術CSS3を使用することです。最新のすべてのブラウザで使いやすく、オブジェクトがズームしている間、すべて同時に中央揃えを処理します。transform:scale()

このオンラインデモの例として、上記のサーバーのjsFiddleを使用すると、代わりにマークアップを置き換えることができますimage map。

于 2012-12-23T08:42:59.080 に答える