禁用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); 
});