1

我需要有一个可缩放的图像，<div>此时我有一个以可缩放为中心的图像，我有一个<div>用作包装器，<div>它是可缩放的并保存图像。我有一些 jquery 代码可以计算 . 的宽度<body>并获取<div>/<img />. 网站内容为745px；所以窗口的其余部分将留给 div 和图像。这就是我现在所拥有的：

<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

你不仅有两个调整大小的功能，而且你应该只使用标准的 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 回答
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 回答