jquery 调整窗口大小

发布于 2024-08-16 03:27:43 字数 1512 浏览 5 评论 0原文

我下面有这个脚本，它将在窗口调整大小时调整“.content”的大小，它工作正常，但唯一的问题是它会猛烈地等待，直到调整大小完成，然后调整“.content”的大小，是否需要等待才能平滑调整大小当窗口大小调整时它也会调整大小？

javascript

function foo(){
    //e.cancelBubble = true; 
    $('.content').each(function (){
        p = $('.content').parent();
        var ch = 0;
        var cw = 0
        c = p.children().each(function (i,n){
            ch +=$(this).height()
            cw +=$(this).width()
        });
        $(this).height(p.height()-(ch-$(this).height()) )
            .width(p.width()-(cw-$(this).width()) )
        t = $('#tmp');
        t.text('p:height: ' +p.height()+' c:'+ch );
    });
}
$(window).resize(foo)

css

        html,body{height: 100%; width: 100%; margin: 0; padding: 0; }
        .holder{
            width: 100%;
            height: 100%;
            background: yellow;
        }
        .header{ 
            background-color: red;
        }
        .footer{ 
            background-color: brown;
        }
        .content{
            background-color: #eeeeee;
        }

html

<body onload="foo();" onresize="foo()">
    <div class="holder">
        <div class="header">
            #header
        </div>
        <div class="content">
            #content
            <div id="tmp">Waiting...</div>
        </div>
        <div class="footer">
            #footer
        </div>
    </div>
</body>

原文

i have this script below that will resize the ".content" on window resize it works fine but the only problem is that it jerks it waits until the resize has finished and then resizes the ".content" is there a wait to smooth the resizing that it resizes while the window resizes?

javascript

function foo(){
    //e.cancelBubble = true; 
    $('.content').each(function (){
        p = $('.content').parent();
        var ch = 0;
        var cw = 0
        c = p.children().each(function (i,n){
            ch +=$(this).height()
            cw +=$(this).width()
        });
        $(this).height(p.height()-(ch-$(this).height()) )
            .width(p.width()-(cw-$(this).width()) )
        t = $('#tmp');
        t.text('p:height: ' +p.height()+' c:'+ch );
    });
}
$(window).resize(foo)

css

        html,body{height: 100%; width: 100%; margin: 0; padding: 0; }
        .holder{
            width: 100%;
            height: 100%;
            background: yellow;
        }
        .header{ 
            background-color: red;
        }
        .footer{ 
            background-color: brown;
        }
        .content{
            background-color: #eeeeee;
        }

html

<body onload="foo();" onresize="foo()">
    <div class="holder">
        <div class="header">
            #header
        </div>
        <div class="content">
            #content
            <div id="tmp">Waiting...</div>
        </div>
        <div class="footer">
            #footer
        </div>
    </div>
</body>

分享到QQ

分享到微博