根據窗口寬度調整大小來啓用和禁用腳本

我想要做的是當瀏覽器窗口寬度小於1000px時，例如觸發腳本貓頭鷹傳送帶。但是，當瀏覽器窗口寬度變得大於1000像素以禁用貓頭鷹傳送帶並且內容再次正常顯示時。根據窗口寬度調整大小來啓用和禁用腳本

我設法做到這一點，當窗口超過1000px，並調整它的大小低於1000px，但當我再次調整大小超過1000px它不禁用貓頭鷹傳送帶。

我的代碼

<script type="text/javascript"> 
 

 
$(document).ready(function() { 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < 1000) { 
 
    $(".box").owlCarousel(); 
 
    } 
 
else { 
 
    //do nothing what to put here??? 
 
} 
 
}); 
 
}); 
 

 

 

 
</script>

<div class="box"> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
\t \t <div class="product"></div> 
 
</div>

我想也使用JavaScript如果窗口大小調整爲.box的DIV加個班，但同樣低於和高於1000像素時，它會調整的JavaScript它不會根據我的需要動態改變。

您能否告訴我最好的方法來檢查實時的瀏覽器寬度和啓用/禁用貓頭鷹旋轉木馬？

來源

2015-08-21 Tasfer

我非常懷疑你想繼續啓動它，可能想檢查它是否完成。 – epascarello

圖書館是否有銷燬方法？ – epascarello

我以前沒有用過owlcarousel，但是很快看着the docs，我想你要用的是owl.destroy（）方法。

$(document).ready(function() { 

    $(".owl-carousel").owlCarousel() 

    //get carousel instance data and store it in variable owl 
    var owl = $(".owl-carousel").data('owlCarousel') 
    $(window).resize(function() { 
    if ($(window).width() < 1000) { 
     owl.reinit() 
    } else { 
     owl.destroy() 
    } 
    }); 
});

來源

2015-08-21 14:53:15 cjol

謝謝Hephistocles它效果很好！現在，當我調整窗口大小時，它會隨時改變。 – Tasfer

Window.matchMedia()可能是您的解決方案。從文檔：

返回一個新的MediaQueryList對象，表示指定媒體查詢字符串的解析結果。

例子：

if (window.matchMedia("(max-width: 1000px)").matches) { 
    $(".box").owlCarousel(); 
} else { 
    /* however you disable the carousel... */ 
}

希望這有助於！

來源

2015-08-21 14:50:18

根據窗口寬度調整大小來啓用和禁用腳本

回答

相關問題