0

我有一个包含图像的水平 jscrollpane。

图像的默认高度为 400 像素，我想制作一个“小”按钮，将图像的高度更改为 200 像素（例如）。当然宽度也会改变以保持比例。

首先我有这个代码来计算图像的总宽度：

$(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 回答