javascriptで変数を再計算する方法

Question

function scrollContent(){ 
    var div = $('#scrolling-content'), 
       ul = $('ul.image'), 
       // unordered list's left margin 
       ulPadding = 0; 

    //Get menu width 
    var divWidth = div.width(); 

    //Remove scrollbars 
    div.css({overflow: 'hidden'}); 

    //Find last image container 
    var lastLi = ul.find('li:last-child'); 

    //When user move mouse over menu 
    div.mousemove(function(e){ 

    //As images are loaded ul width increases, 
    //so we recalculate it each time 
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth)/divWidth; 
     div.scrollLeft(left); 
    });  
} 

これは私の画像リストをスクロールする方法です。問題は、#scrolling-content要素のサイズが動的であることです。ウィンドウのサイズ変更時に変更されます。ここに;

$(window).resize(function() { 
     $("#scrolling-content").css("width",$(window).width() + "px"); 
     $("#scrolling-content").css("height",($(window).height()-400) + "px"); 
}); 

したがって、ユーザーがウィンドウサイズを変更したときに左の値を再計算する必要があります。スクリプトを変更するにはどうすればよいですか？ window.resize機能を持つscrollContent()機能を呼び出すことは、私が推測するようにnoobの解決策です。そして、それはIEのための競合を作成します。

Answer 1

あなたは、サイズ変更時に幅を設定して、そのように変数を呼び出すようにすることができます。このメソッドはあなたの関数をjsオブジェクトに変換し、ウィンドウの更新はそのオブジェクト内部の幅varをリセットします。今度は、このような関数を呼び出します：scrollContent.scroll（）;

var scrollContent = { 
     width: 0, 
     scroll:function(){ 
      var div = $('#scrolling-content'), 
        ul = $('ul.image'), 
        // unordered list's left margin 
        ulPadding = 0; 

      //Get menu width 
      scrollContent.width = div.width(); 

      //Remove scrollbars 
      div.css({overflow: 'hidden'}); 

      //Find last image container 
      var lastLi = ul.find('li:last-child'); 

      //When user move mouse over menu 
      div.mousemove(function(e){ 

      //As images are loaded ul width increases, 
      //so we recalculate it each time 
      var left = (e.pageX - div.offset().left) * (ulWidth-scrollContent.width)/scrollContent.width; 
       div.scrollLeft(left); 
      }); 
     } 
    }; 

$(window).resize(function() { 
     $("#scrolling-content").css("width",$(window).width() + "px"); 
     $("#scrolling-content").css("height",($(window).height()-400) + "px"); 
     scrollContent.width = $(window).width(); 
}); 

標準のjs varを宣言して単純なものにすることもできます。私は、可能なvar干渉を排除するためにjsオブジェクトで作業することを好むだけです。