禁用jQuery的

Question

我想禁用以下的JavaScript，如果屏幕尺寸为< 601px：

$(function() { 
    function rotate() { 
    $('#homemaincontent div').last().fadeOut(2000, function() { 
     $(this).insertBefore($('#homemaincontent div').first()).show(); 
    }); 
    } 
    setInterval(function() { 
    rotate(); 
    }, 7000); 
}); 

我发现了一个看似不错的答案如下页面，但我不能让它的工作：

Disable jquery function when screen width larger than 480

Answer 1

$(function() { 
    function rotate() { 
    $('#homemaincontent div').last().fadeOut(2000, function() { 
     $(this).insertBefore($('#homemaincontent div').first()).show(); 
    }); 
    } 
    setInterval(function() { 
     if(Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > 601) 
      rotate(); 
    }, 7000); 
    }); 

所以现在每次旋转称为它会首先检查视口宽度大于601，如果是它将执行的功能。

如果你不想调整为响应行为，你可以把那个if语句在$(function(){ insert if() run rest of code else do nothing}开始时运行，当你的脚本运行的第一次只会评估一次

编辑 要回答有关在评论

你的第二个问题创建一个staticImageX CSS类和DynamicImageX类 ，将有喜欢的位置，宽度，顶部等 使用jQuery和上述表达式来测试针对宽度再次需要的CSS和运行jQuery代码来调整图像容器上的类在同一个intervan为您的旋转功能 所以

if(width > 601) 
    $('#imageContainer').addClass('DynamicImageX').removeClass('staticImageX') 
else 
    $('#imageContainer').addClass('staticImageX').removeClass('DynamicImageX')** 

Answer 2

包括以下jQuery的插件：

/*! viewportSize | Author: Tyson Matanich, 2013 | License: MIT */ 
(function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this); 

而且使用这样的：

if (viewportSize.getWidth() > 600) { 
//your function goes here 
} 

Answer 3

如果要检测浏览器窗口：

if($(window).width() > 601){ 
    // function 
} 

如果您要检测你的HTML文档的宽度：

if($(document).width() > 601){ 
    // function 
} 

根据对另一个答案您的评论，你可以添加静态图像，而不是像这样：

$(function() { 
    function rotate() { 
     $('#homemaincontent div').last().fadeOut(2000, function() { 
      $(this).insertBefore($('#homemaincontent div').first()).show(); 
     }); 
    } 

    setInterval(function() { 
     if($(window).width() > 601){ 
      rotate(); 
     } else { 
      var staticIMG = document.getElementById('staticIMG'); 
      if (typeof(staticIMG) != 'undefined' && staticIMG != null){ 
       return false; 
      } else { 
       $("<img id='staticIMG' src='your/static/image.png'>").insertBefore($('#homemaincontent div').first()).show(); 
      } 
     } 
    }, 7000); 
});