使用窗口大小更改jQuery幻燈片大小

當瀏覽器大小大於1280像素時，我需要此滑塊更改爲1180x454。不知道如何在CSS之外進行@media類型的更改。謝謝。使用窗口大小更改jQuery幻燈片大小

<script type="text/javascript"> 

     $(document).ready(function() { 
     $.noConflict(); 
    jQuery('#banner-example-1').paradigm(
        {          
         width:940, 
         height:362  

       });      
     }); 

     </script>

來源

2012-10-25 KevinSweeney

什麼阻止您使用CSS媒體查詢？你的例子並沒有說明你爲什麼需要改變使用JavaScript的大小。 – pvanhouten

這並沒有像jQuery的重載一樣工作。 @media screen and（min-width：1281px）{banner-example-1 {width：1180px！important; height：454px！important;} } – KevinSweeney

你可以在這裏查看：http://www.sirkproductions.com/ – KevinSweeney

這可能不是最好的解決辦法，但鑑於一些滑塊的侷限性，它好像你可能沒有選擇，因爲調整窗口大小，而不是推出自己的縮放功能。

$(window).resize(function() { 
    // put your code here to trigger resizing of your slider 
});

Here's a basic jsfiddle as an example。你可以做這樣的事情，在你檢查窗口大小是否有一定寬度的情況下，如果是這樣，請包括JavaScript來調整內嵌寬度和高度的範例div。

編輯：更新了jsfiddle以包含用於更改元素寬度的邏輯。不幸的是，我不能告訴你具體什麼，你需要做什麼來觸發範例大小的變化，因爲文檔不是公開的，所以如果它不是這樣簡單的話，你可能需要聯繫開發人員尋求幫助：

$(window).resize(function() { 
    // If > 1280 then width: 1180, height: 454 else width: 940, height: 362 
    var width, height; 
    if (this.outerWidth > 1280) { 
    width = "1180px"; 
    height = "454px"; 
    } 
    else { 
    width = "940px"; 
    height = "362px"; 
    } 
    $("#banner-example-1").css("width", width); 
    $("#banner-example-1").css("height", height); 
});

來源

2012-10-25 04:32:11 pvanhouten

對不起。我不確定如何利用這個。我是一個JavaScript的業餘愛好者。我假設我需要一個if else語句。如果> 1280然後寬度：1180，高度：454其他寬度：940，高度：362.我不知道如何包裝它與此功能，但。 – KevinSweeney

您可能還需要添加一些內容到頁面加載，以通過將我展示的邏輯拉入自己的函數或將該條件添加到您的初始寬度/高度設置來設置初始高度/寬度。 – pvanhouten

不適合我。我會聯繫插件開發人員。似乎工作的唯一方法是在窗口調整大小函數中的if else語句中加載它兩次，但它效果不佳。裝載正確，但如果你調整窗口大小，它會變得瘋狂。非常感謝你的幫助。 – KevinSweeney

使用窗口大小更改jQuery幻燈片大小

回答

相關問題