在窗口调整大小时添加和删除 jQuery 插件

Question

我只在屏幕尺寸为 1200 像素或更大时才尝试添加 jQuery 插件。

我希望它在窗口加载和调整大小时起作用，但我无法让它正常工作，我希望它像 CSS 媒体查询一样工作，在每次调整大小时检查窗口大小并应用更改，在这个插件的情况。

JSFiddle

$(window).on('load resize', function() {
if (window.matchMedia("(min-width: 1200px)").matches) {
    $('.zoom').zoom(); 
  }; 
});

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 90%;
}

.zoom img {
  width: 70%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=center>
<div class="zoom"><img src="https://www.aussiespecialist.com/content/asp/en_sg/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg"></div>
</div>

Answer 1

我会使用 jQuery 获取屏幕宽度并运行 if 语句来执行您的代码。我通常将 $(window).resize() 事件嵌套在 $(document).ready() 事件中。请看下面的代码！希望对你有帮助...

$(document).ready(function(){
        enableZoom();
    $(window).resize(function(){
        enableZoom();
    });
});
function enableZoom(){
    var screen_width = $(window).width();
    if (screen_width > 1200){
        $('.zoom').zoom();
    }else if (screen_width <= 1200){
        $('.zoom').trigger('zoom.destroy');      
    } 
}