用於響應式佈局的多個腳本（窗口）.resize

因此，我目前正在使用響應式佈局的單頁網站。在較小的屏幕上，我使用動畫滾動插件在內容div之間導航，但在較大的屏幕上，我使用插件來簡單切換這些div的可見性。用於響應式佈局的多個腳本（窗口）.resize

我遇到的問題是，如果窗口在頁面加載後重新調整大小，我需要更改腳本。我認爲$（window）.resize會做的伎倆，但它似乎並沒有工作，並繼續使用最初加載的腳本，而不是執行正確的腳本。 .anchorAnimate和.anchorTog是我正在使用的插件，但我不認爲它們是這裏的問題。如有必要，我可以發帖。

代碼：

$(document).ready(function() { 

    var w = $(window).width(); 

    if(w <= 767) { 
     $('a.anchorLink').anchorAnimate(); 
    } 
    if(w >= 768) { 
     $('a.anchorLink').anchorTog(); 
    } 

    $(window).resize(function(){ 
     if(w <= 767) { 
      $('a.anchorLink').anchorAnimate(); 
     } 
     if(w >= 768) { 
      $('a.anchorLink').anchorTog(); 
     } 
    }); 
});

來源

2013-09-25 Robert

您可能需要取消初始化的窗口重新初始化之前調整插件，或類似的。 –

我會把window.resize放到它自己的作用域外的文檔範圍內，因爲它會初始化jQuery，然後從那裏，上面和之前定義w＆h – MackieeE

在代碼中，變量「w」超出了resize函數的作用域。當文檔達到準備好狀態時，「w」將只是窗口寬度。爲了解決這個問題，你可以重新聲明變量在你的大小調整功能，使每次我們得到一個調整大小的時候，我們檢查寬度：

$(window).resize(function(){ 
    var w = $(window).width(); 
    if(w <= 767) { 
     $('a.anchorLink').anchorAnimate(); 
    } 
    if(w >= 768) { 
     $('a.anchorLink').anchorTog(); 
    } 
});

來源

2013-09-25 17:31:32

工作就像一個魅力。我無法相信這麼長時間以來，我的大腦一直在痛苦之中。 – Robert

自適應設計通常意味着CSS，JavaScript不。

在CSS3中，您可以使用@media定義要支持的屏幕尺寸的尺寸。

如果您使用CSS，您可以使用硬件加速動畫，這比您在JavaScript中可以做的任何事情都要流暢得多。

谷歌的「響應式設計css3」，你會得到很多例子。

來源

2013-09-25 16:20:39 Halcyon

該網站本身使用CSS媒體查詢進行響應。這個腳本需要隨着CSS媒體查詢而改變，並根據屏幕寬度做不同的事情。 – Robert

我不太瞭解你的代碼。看起來你正在嘗試做更多的動畫。 – Halcyon

用於響應式佈局的多個腳本（窗口）.resize

回答

相關問題