0

我正在尝试一个简单的脚本，其中一些 div 在页面加载时以及在调整窗口大小时设置为窗口的 w/h。这是我的代码：

/* MODULE - RESIZE THE SCROLLER */
var resizeContainer = (function()
{
    /* SETTINGS */
    var s = {
        $scrollable : $('#scrollable'),
        $sectionWrapper : $('#sectionwrapper'),
        $scrollableChildren : $('.scrollableV'),
        $childrenTotal : $('.scrollableV').length,
        $navText : $('nav span'),
        $winWidth : $(window).innerWidth(),
        $winHeight : $(window).innerHeight(),
        fontSize : parseInt($(window).width()/10)+'px'
    };

    function init()
    {
        bindUIActions();
    }

    function bindUIActions()
    {
        s.$scrollable.add(s.$scrollableChildren).css(
        {
            width : s.$winWidth,
            height : s.$winHeight
        });

        s.$sectionWrapper.css(
        {
            width : s.$winWidth * s.$childrenTotal,
            height : s.$winHeight
        });

        s.$navText.css(
        {
            'font-size' : s.fontSize
        });

        console.log(s.$winWidth);
    }

    return { init : init };
})();




$(document).ready(function()
{
    /* CALL RESIZE MODULE */
    resizeContainer.init();
});

$(window).on('resize', function()
{
    /* CALL RESIZE MODULE */
    resizeContainer.init();
});

当我在文档就绪时调用 resizeContainer 时，控制台会为我提供窗口大小，但是当我调整窗口大小时，值不会更新。谁能帮我理解为什么？提前谢谢了。

4

2 回答 2

0

I cannot see what is wrong in your code, however, resize event got particular behaviour which made it call often twice (depending of browser). You could try this and see if its working for you:

$(document).ready(function()
{
   var timeoutResize;
   $(window).on('resize', function()
   {
       clearTimeout(timeoutResize);
       timeoutResize = setTimeout(resizeContainer.init,100);
   }).triggerHandler('resize');
});
于 2013-05-03T10:51:27.757 回答
0

我想到了。resizeContainer 在 doc 就绪时调用，它会带入所有带有 s 的值。当窗口被调整大小时，它只是调用 resizeContainer 中的 init() 函数并且不再引用 s。这是我更新的有效代码：

/* MODULE - RESIZE THE SCROLLER */
var resizeContainer = (function()
{
    /* SETTINGS */
    var s = {
        $scrollable : $('#scrollable'),
        $sectionWrapper : $('#sectionwrapper'),
        $scrollableChildren : $('.scrollableV'),
        $childrenTotal : $('.scrollableV').length,
        $navText : $('nav span')
    };

    function init()
    {

        bindUIActions();
    }

    function bindUIActions()
    {   

        s.$scrollable.add(s.$scrollableChildren).css(
        {

            width : $(window).width(),
            height : $(window).height()

        });

        s.$sectionWrapper.css(
        {
            width : $(window).width() * s.$childrenTotal,
            height : $(window).height()
        });

        s.$navText.css(
        {
            'font-size' : parseInt($(window).width()/4)+'%'
        });

        console.log($(window).width());
    }

    return { init : init };
}());




$(document).ready(function()
{
    /* CALL RESIZE MODULE */
    resizeContainer.init();
});

$(window).on('resize', function()
{
    /* CALL RESIZE MODULE */
    resizeContainer.init();
});

希望这是有道理的。

于 2013-05-03T13:16:07.630 回答