jscrollpane jquery按鈕來改變高度和寬度

我有一個水平的jscrollpane包含圖像。jscrollpane jquery按鈕來改變高度和寬度

圖像的默認高度爲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 ，但一旦點擊完成。

有什麼想法？

感謝所有的時間

來源

2012-12-08 bboy

而不是把代碼在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(); 
});

你會發現，我稱之爲JScrollPane的（）函數在calculateHeight功能。即重新調整大小後的jscrollpanes。請注意，您也可以使用名爲reinitialise的jscrollPane API方法，但您需要更熟悉它。從經驗來看，通過API更好，但再次調用函數會得到相同的結果。

來源

2012-12-09 05:45:47

hi @ComputerArts！感謝您花時間來解釋和展示如何使這項工作，但是看起來我做錯了什麼，jscrollpane根本不工作。你可以在這裏看到我的嘗試：http://bit.ly/TJaqC6 – bboy

嗯，你沒有設置正確的wrapperWidth容器一旦它更小。這裏：'$（「。scroll-content，.jspContainer」）.css（'width'，wrapperWidth）;'你正在設置窗口加載函數上計算的相同wrapperWidth。 –

這是我現在的代碼：http://snipt.org/xgiid3 我需要初始加載。所以我可以告訴jscrollpane寬度是多少。如果我在收到一些錯誤後添加你的。非常感謝您花時間在此 – bboy

jscrollpane jquery按鈕來改變高度和寬度

回答

相關問題