Question

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

我希望它能够在窗口加载和调整大小时运行，但我无法使其正常工作，我希望它像css媒体查询一样工作，检查每个调整大小的窗口大小并应用更改，在这种情况下插件。

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

我将使用jQuery获取屏幕宽度并运行if语句来执行您的代码。我通常在$（document）.ready（）事件中嵌套$（window）.resize（）事件。见下面的代码！希望它有所帮助...

$(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');      
    } 
}

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

1 个答案: