JQuery用於設置動態最大寬度

我對jQuery並不特別熟悉，因此完整的代碼解決方案將是理想選擇。JQuery用於設置動態最大寬度

該函數將：

獲取瀏覽器的屏幕的70％的寬度。
將該寬度轉換爲其對應的px值
使用從轉換/計算得到的值設置#mainContainer的最大寬度。

這裏是我想設置max-width與容器的CSS樣式：

#mainContainer { 
    background-image: url(bg3.jpg); 
    background-repeat: repeat; 
    background-color: #999; 
    width: 70%; 
    padding: 0; 
    min-width: 940px;  /* 940px absolute value of 70%. */ 
    margin: 0 auto; 
    min-height: 100%; 
    /* Serves as a divider from content to the main container */ 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

來源

2011-11-18 Teffi

你應該能夠在你擁有jQuery和它的頁面的任何地方複製粘貼此一<script>標籤內應工作..

$(document).ready(function(){ 
    setMaxWidth(); 
    $(window).bind("resize", setMaxWidth); //Remove this if it's not needed. It will react when window changes size. 

    function setMaxWidth() { 
    $("#mainContainer").css("maxWidth", ($(window).width() * 0.7 | 0) + "px"); 
    } 

});

來源

2011-11-18 14:00:39 Esailija

做我只是有這個代碼放到一個JS文件，然後將其鏈接到HTML。沒有更多需要？ – Teffi

@Saver，讓我做一個複製粘貼解決方案。 – Esailija

不應該是「max-width」而不是「maxWidth」嗎？ – dsdsdsdsd

或定義一個函數爲window.onresize事件

window.onresize = function() { 
 
    var newWidth = ($(window).width() * .7); 
 
    $("#mainContainer").css({ 
 
    "maxWidth": newWidth 
 
    }); 
 
}

#mainContainer { 
 
    background-color: #999; 
 
    width: 70%; 
 
    padding: 0; 
 
    min-width: 30px; 
 
    /* 940px absolute value of 70%. */ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    /* Serves as a divider from content to the main container */ 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mainContainer">-</div>

來源

2015-06-26 16:15:48 nathan

JQuery用於設置動態最大寬度

回答

相關問題