2

简单的问题我可以停止带有媒体查询的 jquery 函数吗？

我有一个 jQuery 幻灯片，我想在窗口达到手机大小时停止它，以便调整布局。

4

3 回答 3

1

Media Queries是一个CSS3概念，而不是 JavaScript 功能。因此，在 javascript 中使用媒体查询意味着，在支持实现中，查询浏览器的 CSS API 以获取值。

使困惑？

window.matchMedia()就是你从 javascript 中调用的内容

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {  
    // window width is at least 500px  
}  
else {  
    // window width is less than 500px  
}

这又把我们带到了经典的问题，“浏览器对它的支持是什么？ ”！在我看来，这相当低，因为这依赖于现代浏览器
中更常见的功能。

有希望吗？

有一个js项目允许从浏览器查询事务状态，封装在名为Enquire.js的干净 api 调用后面，并带有一些解释和 tuts

资源：

http://www.sitepoint.com/javascript-media-queries/

于 2012-11-01T15:41:45.577 回答
0

如果您的意思是 css3 媒体查询，我不知道有什么方法可以。

但是这样的事情：

function windowSizeCheck(){
  if($(window).width() > (minSizeforSlideShow) && $(window).height() > (minHeightforSlideShow){
    doSlideShowStuff();
  }
}

...可能会成功。在加载和调整事件大小时调用它 ( $(window).resize())

于 2012-11-01T14:34:34.957 回答
0

我认为这是不可能的，尽管有人可能会证明我错了；

如果屏幕宽度小于 768 像素，我们会通过重新排列我们的菜单来处理我们网站上的类似问题。所以你可以在 document.ready() 上做这样的事情

if ($(window).width() > 767) {
  // Start jquery slideshow here
}

我们还通过将宽度检查包装在一个函数中来解决浏览器的大小调整问题。

$(window).resize(function() {
            StartSlideshow();
        });

function StartSlideshow() {
    if ($(window).width() > 767) {
      // Start jquery slideshow here
    }
}

如果你这样做，你还需要调用 document.ready 上的函数！

于 2012-11-01T14:32:31.350 回答