0

画像を含む水平方向の jscrollpane があります。

画像のデフォルトの高さは400pxで、画像の高さを200pxに変更するボタンを「小さく」したい(たとえば)。もちろん、プロポーションを保つために幅も変更されます。

最初に、画像の合計幅を計算する次のコードがあります。

$(window).load(function(){

$('.scroll-content').each(function(){
var wrapper = $(this);
var wrapperWidth = 0;


    wrapper.find('.scroll-content-item img').each(function(){
        wrapperWidth += $(this).outerWidth(true) + 20;
    });

    wrapper.css('width', wrapperWidth);

そして素晴らしい仕事をします。次に、jscrollpane を初期化します。

$('.scroll-pane').jScrollPane();

そしてボタン：

$('.minus-button').click(function() {
$(".scroll-content-item img, .scroll-content-item, .jspContainer").css('height', 300); 
});

画像の合計幅を再計算して に与えるために、関数を追加するか、もう一度呼び出すにはどうすればよいですか.scroll-content。

何か案は？

いつもありがとう

4

1 に答える 1

0

コードを window.load 関数に入れる代わりに、別の関数を作成し、その関数を再度呼び出します。

例

function calculateWidth() {}
    $('.scroll-content').each(function(){
      var wrapper = $(this);
      var wrapperWidth = 0;

      wrapper.find('.scroll-content-item img').each(function(){
        wrapperWidth += $(this).outerWidth(true) + 20;
      });

      wrapper.css('width', wrapperWidth);
    }
    $('.scroll-pane').jScrollPane();
}

$(window).load(function() { calculateWidth(); })

$('.minus-button').click(function() {
    $(".scroll-content-item img, .scroll-content-item, .jspContainer").css('height', 300);
    calculateWidth(); 
});

calculateHeight 関数で jScrollPane() 関数を呼び出していることに気付くでしょう。これは、サイズ変更後に jscrollpanes を再初期化することです。reinitialise と呼ばれるjscrollPane API メソッドを使用することもできますが、このメソッドに慣れる必要があることに注意してください。経験上、API を使用することをお勧めしますが、関数を再度呼び出しても同じ結果が得られます。

于 2012-12-09T05:45:47.343 に答える