基於窗口寬度動態更改jQuery滑塊選項

我想基於窗口寬度（加載和調整大小）更改jQuery選項。基於窗口寬度動態更改jQuery滑塊選項

我發現解決方案接近我所需要的，但我不明白jQuery或JavaScript足以根據我的需要定製它們。

這裏是我的jQuery代碼：

<script type="text/javascript"> 
    var tpj = jQuery; 

    tpj.noConflict(); 

    tpj(document).ready(function() { 

    if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal; 

    tpj('#rev_slider_1_1').show().revolution({ 
     delay: 5000, 
     startwidth: 1920, 
     startheight: 515, 
     hideThumbs: 200, 

     thumbWidth: 100, 
     thumbHeight: 50, 
     thumbAmount: 4, 

     navigationType: "bullet", 
     navigationArrows: "verticalcentered", 
     navigationStyle: "navbar", 

     touchenabled: "on", 
     onHoverStop: "off", 

     navOffsetHorizontal: 0, 
     navOffsetVertical: 20, 

     shadow: 0, 
     fullWidth: "on" 
    }); 

    }); //ready 
</script>

我想改變startheight基於窗口的寬度。

如果窗口寬度高於1280，我希望高度的值爲515，如果低於1280，我希望高度爲615，如果寬度小於480，則高度爲715。

從另一個post幫助我能夠改變我需要使用這個腳本的CSS：

$(window).on('load resize', function() { 
    var w = $(window).width(); 
    $("#rev_slider_1_1 #rev_slider_1_1_wrapper") 
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715); 
});

但我還需要在運行中改變了jQuery startheight值。

來源

2012-09-03 Nathan

是的，我相信如此。 – Nathan

爲什麼不在CSS中使用百分比。

我在這裏創造一個例子：

http://jsfiddle.net/webwarrior/aLJQm/52/

<div id="slider"></div>

的CSS：

#slider { 
    width: 90%; 
}

來調整，使用JavaScript與您的調整大小是這樣的：

var clientWidth = jQuery(window).width(); 
var clientHeight = jQuery(window).height(); 
jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20);

嘗試上的圖像現在以下幾點：

.slotholder{ 
    overflow: hidden; 
} 
.slotholder img{ 
    width: 110%; 
    margin-left: -5%; 
}

上http://jsfiddle.net/webwarrior/wLFEJ/11/

心連心

來源

2012-09-03 03:53:26 ShaunOReilly

感謝您的時間！滑塊已經響應 - 我試圖做的是提高響應速度。我使用1920像素寬的圖像（所以滑塊在大屏幕上看起來不錯），但對於iPhone，我想「放大」原樣，以使高度更高的滑塊的高寬比，並修剪圖像的兩側關閉。「startheight」的值正好改變了我的需求，但我無法弄清楚如何根據窗口寬度來改變這個值。測試網站在這裏：http://beta.actioncambodia.org – Nathan

編輯我的回覆順便說一下，不錯的網站，但你在哪裏使用滑塊？ – ShaunOReilly

對不起，我在滑動代碼嘗試找到一個解決方案，現在回來看看，如果看看會有所幫助。在你編輯的答案 - 這不只是編輯CSS？只編輯CSS似乎並沒有改變我需要的值。如果我手動更改javascript中的startheight值，我可以得到我需要的結果，但正如我所說的，我無法弄清楚如何動態更改它。 – Nathan

修改 '負載大小調整' 事件綁定像這樣：

$(window).on('load resize', function() { 
    var w = $(window).width(); 
    $("#rev_slider_1_1 #rev_slider_1_1_wrapper") 
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715); 
    if(w > 1280) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 515);} 
    else if(w < 1280 && w > 480) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 615); } 
    else { tpj('#rev_slider_1_1').revolution('option', 'startheight', 715); }  
});

這將適用於大多數jquery插件，但因爲你似乎使用付費插件（http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848將是我的猜測），定製可能會受到限制 - 所以，一切順利！ :)

來源

2012-09-03 08:22:09 Tiquelou

基於窗口寬度動態更改jQuery滑塊選項

回答

相關問題