如何禁用JavaScript的響應式設計

Question

我一直在使用超大型jQuery爲我的網站的幻燈片背景。我正在使網站響應並使用CSS媒體查詢。

我希望能夠在480px以下時禁用腳本。

下面是實際的滑塊背景

$(document).ready(function(){ 

     jQuery(function($){ 

      $.supersized({ 

       // Functionality 
       slideshow    : 1,   // Slideshow on/off 
       autoplay    : 0,   // Slideshow starts playing automatically 
       start_slide    : 1,   // Start slide (0 is random) 
       stop_loop    : 0,   // Pauses slideshow on last slide 
       random     : 0,   // Randomize slide order (Ignores start slide) 
       slide_interval   : 3000,  // Length between transitions 
       transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 1000,  // Speed of transition 
       new_window    : 1,   // Image links open in new window/tab 
       pause_hover    : 0,   // Pause slideshow on hover 
       keyboard_nav   : 1,   // Keyboard navigation on/off 
       performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
       image_protect   : 1,   // Disables image dragging and right click with Javascript 

       // Size & Position       
       min_width    : 0,   // Min width allowed (in pixels) 
       min_height    : 0,   // Min height allowed (in pixels) 
       vertical_center   : 1,   // Vertically center background 
       horizontal_center  : 1,   // Horizontally center background 
       fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
       fit_portrait   : 1,   // Portrait images will not exceed browser height 
       fit_landscape   : 0,   // Landscape images will not exceed browser width 

       // Components       
       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
       thumb_links    : 1,   // Individual thumb links for each slide 
       thumbnail_navigation : 0,   // Thumbnail navigation 
       slides     : [   // Slideshow Images 
                {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'} 
              ], 

       // Theme Options    
       progress_bar   : 1,   // Timer for each slide       
       mouse_scrub    : 0 

      }); 
     }); 

我想我可以通過只使用CSS做這個簡單的腳本，例如在我的媒體查詢只是把#supersized爲顯示：無

這是不好的做法，因爲它仍然會運行腳本，最好是以某種方式禁用它嗎？

Answer 1

正如其他人所說，有很多jQuery插件可以使用。但是，如果你想使用的只是簡單的香草jQuery，你也可以做你想做的。

您可以使用jquery中的resize方法來檢測窗口的大小。

$(window).resize(function() { 
    if ($(this).width() > 480) { 
     // call supersize method 
    } 
}); 

然後在文檔準備好了，只是一定要調用大小調整窗口，以便它最初將來電或不調用該方法取決於你的窗口的當前大小：

$(document).ready(function() { 
    $(window).resize(); 
}); 

PS>如果你不這樣做每當窗口大小調整時都需要運行此腳本，但是隻有在達到480像素以下時，纔可以在腳本需要被禁用或啓用後，對resize方法進行輕微的修改。

Answer 2

jRespond，通過Viget的發佈了一個腳本，您可以根據視口大小來控制的JavaScript：

文章：http://viget.com/inspire/managing-javascript-on-responsive-websites

代碼：https://github.com/ten1seven/jRespond

Answer 3

您可以設置一個隱藏的div與內一些CSS規則一個媒體查詢，然後用jQuery的css()檢查這些CSS屬性，並基於該屬性開啓或關閉幻燈片。具體做法是：

@media all and (max-width: 480px) { 
    #testdiv{ 
     display:none; 
    } 
} 

和JS：

if($("#testdiv").css("display") == "none"){ 
    $.supersized({...}); 
} 

注意，這是基本使用沒有實際得到庫中的Modernizr的方法。

Answer 4

由於@Pointy在評論中指出，modernizr允許您從javascript調用媒體查詢。閱讀modernizr documentation

Answer 5

您可以使用screen.width，使用JavaScript檢測屏幕寬度，然後從中確定要執行的操作。

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing 
    return; 
} else { 
    // do all your cool stuff here for larger screens 
} 

總結所有的動畫和所有的代碼，你不想爲案件的其他塊在屏幕尺寸小於480

由於謹慎的字內運行， IE往往做的事情不同，我沒有IE來測試，所以你可能想在那裏運行screen.width並根據需要調整任何差異。但在Chrome中，screen.width返回1280，這是我的屏幕的正確寬度。

Answer 6

我認爲Asad的解決方案是最好的或者您使用modernizr。 因爲您在單個文件中有斷點定義（480px），而不是在JS和CSS中。 如果使用SCSS，則變量中的斷點只有一個定義。