Question

我有一个包含图像的水平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，但一旦点击完成。

任何想法？

感谢所有时间

Answer 1

不是将代码放在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，但再次调用该函数会得到相同的结果。

jscrollpane jquery按钮改变高度和宽度

1 个答案: