javascript - 如何禁用 javascript 以进行响应式设计

Question

我一直在使用超大 jQuery 作为我网站的幻灯片背景。我正在使网站具有响应性并使用 css 媒体查询。

我希望能够在脚本低于 480 像素时禁用它。

这是实际滑块背景的脚本

$(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 设置为 display:none

这是不好的做法，因为它仍然可以运行脚本，最好以某种方式禁用它？

score 9 · Accepted Answer

正如其他人所提到的，您可以使用很多 jQuery 插件。但是，如果你只想使用普通的 jQuery，你也可以做你想做的事。

您可以使用 jquery 中的 resize 方法来检测窗口的大小。

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

然后在准备好文档时，请务必调用调整大小窗口，以便它最初会根据您窗口的当前大小调用或不调用该方法：

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

PS > 如果您不需要每次调整窗口大小时都运行此脚本，而是仅在达到 480 像素以下时运行，则可以在需要禁用或启用脚本后进行轻微修改以取消绑定调整大小方法。

score 6 · Accepted Answer

您可以使用 JavaScript 检测屏幕宽度，使用 screen.width，然后从那里确定您想要做什么。

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 的情况，将所有动画和所有不想在 else 块中运行的代码包装起来。

提醒一下，IE 倾向于做不同的事情，我没有 IE 来测试，所以你可能想在那里运行 screen.width 并在必要时调整任何差异。但在 Chrome 中，screen.width 返回 1280，这是我的屏幕的正确宽度。

score 4 · Accepted Answer

您可以在媒体查询中使用一些 css 规则设置一个隐藏的 div，然后使用 jQuery 检查这些 css 属性，css()并在此基础上打开或关闭幻灯片。具体来说：

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

和js：

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

请注意，这实际上是在使用 Modernizr 方法而没有实际获取库。

score 0 · Accepted Answer

jRespond，一个由 Viget 发布的脚本，允许您根据视口大小控制 JavaScript：

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

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

score 0 · Accepted Answer

正如@Pointy 在评论中指出的那样，modernizr 允许您从 javascript 调用媒体查询。阅读modernizr 文档

score 0 · Accepted Answer

我认为 Asad 的解决方案是最好的，或者你使用modernizr。因为断点定义 (480px) 在单个文件中，而不是在 JS 和 CSS 中。如果您使用 SCSS，则变量中的断点只有一个定义。

javascript - 如何禁用 javascript 以进行响应式设计

6 回答 6

Related

Reference