1

<div>この時点でスケーラブルを中心とするスケーラブルな画像が必要です。<div>ラッパーとして使用し、<div>スケーラブルで画像を保持します。そして、の幅を計算し、に<body>使用可能なスペースの量を取得するjqueryコードがあります<div>/<img />。サイトのコンテンツは745pxです。したがって、ウィンドウの残りの部分はdivとimage用に残されます。これは私が今持っているものです：

<div class="ad_banner_holder" id="ad_banner_holder" style="width: 100%;">
    <div class="ad_banner" id="ad_banner" style="background: white; text-align: center; position: absolute;">
        <a href="http://www.finconsult.ro/" target="_blank"><img id="the_ad" style="position: fixed; max-width: 800px; margin-top: 82px;" src="http://ww1.particularul.ro/images/ads/3rdtry2.jpg" /></a>
    </div>
</div>

<script type="text/javascript">
    $(window).load(function () {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#the_ad").css("width", adwidth);
        $("#ad_banner").css("width", adwidth);
    });
    $(window).resize(function () {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#ad_banner").css("width", adwidth);

    });
    $(window).resize(function () {
        var adwidth = $("#ad_banner").width();
        $("#the_ad").css("width", adwidth);

    });
</script>

重要なのは、ブラウザのサイズが変更されたときにスクリプトが完全に機能することです。ページを更新すると、ブラウザは画像を中央に配置し、画像を右の位置からサイズ変更します（中央の点から離れます）。同じコードが異なるトリガーで機能しない理由がわかりません。

また、画像のサイズ変更のトリガーをに変更しようとしましたが.hover()、同じように機能します。中央に配置された画像の幅が変更され、中央から離れます。

ヘルプ/説明をいただければ幸いです。

4

2 に答える 2

0

すべてを組み合わせることができます：

<script type="text/javascript">
    $(document).ready(function(){
        var adwidth; // can be used in this scope

        // your resize function is factorized
        function resizeAd(){ 
            adwidth = $("body").width() - 760;
            $("#the_ad").css("width", adwidth);
            $("#ad_banner").css("width", adwidth);
        }

        // launched at DOM ready and on window's resize event
        resizeAd();
        $(window).on('resize', function(){
            resizeAd();
        });
</script>
于 2012-07-19T15:33:23.200 に答える
0

2 つのサイズ変更関数があるだけでなく、ページがいつ読み込まれたかを検出できる標準の jquery を使用する必要があります。

$(function() {
    var adwidth = $("body").width();
    adwidth = adwidth - 760;
    $("#the_ad").css("width", adwidth);
    $("#ad_banner").css("width", adwidth);

    //combine the two resize handlers

    $(window).resize(function() {
        var adwidth = $("body").width();
        adwidth = adwidth - 760;
        $("#ad_banner").css("width", adwidth);

    });
    $(window).resize(function() {
        var adwidth = $("#ad_banner").width();
        $("#the_ad").css("width", adwidth);

    });

});
于 2012-07-19T15:23:30.363 に答える