根据窗口宽度调整大小来启用和禁用脚本

我想要做的是当浏览器窗口宽度小于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

根据窗口宽度调整大小来启用和禁用脚本

回答

相关问题