使用媒体查询停止jQuery

时间:2012-11-01 14:20:40

标签: jquery media

简单的问题是我可以使用媒体查询停止jquery函数。

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

3 个答案:

答案 0 :(得分:1)

Media QueriesCSS3概念,而不是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调用后面,其中包含一些explaination and tuts

来源:

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

答案 1 :(得分: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上调用该函数!

答案 2 :(得分:0)

如果你的意思是css3媒体查询,我不知道你怎么办。

但是这样的事情:

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

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