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

私はそれを考え出した。resizeContainer は doc ready で呼び出され、すべての値が 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 に答える
0

コードの何が問題なのかわかりませんが、サイズ変更イベントに特定の動作が発生し、頻繁に 2 回呼び出されました (ブラウザーによって異なります)。これを試して、うまくいくかどうかを確認できます：

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