Question

我有一些用于滑动菜单的javascript，但我需要一些不同尺寸屏幕的值。

这是我的脚本供参考：

    $('.show-menu').on('click', function () {
        if ($(".menu-button").html() == 'CLOSE') {
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".black-cover").fadeOut(300);
            $(".menu-button").html('MENU');
                } else {
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".black-cover").fadeIn(300);
            $(".menu-button").html('CLOSE');
            }
        });

我的问题是，是否可以加载.js文件脚本，类似于下面的链接查询？

<link rel="stylesheet"
      media="only screen and (orientation:landscape) and (orientation:portrait)" href="ipad.css">

<link rel="stylesheet"
      media="only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-o-min-device-pixel-ratio: 3/2) and (min-device-pixel-ratio: 1.5)" href="iphone.css">

如果您需要我详细说明问题，请告诉我，或者您是否可以考虑其他解决方案，然后提前感谢。

更新，感谢您的3个答案，我可以看到他们所有人都在漂亮。

我将尝试所有这些并重新发布效率最快且最轻的那个： - ）

再次，谢谢

Answer 1

使用window.matchMedia()。这是一个polyfill：https://github.com/paulirish/matchMedia.js

如果要根据当前匹配的媒体查询加载不同的脚本文件，可以将上述内容与LAB.js或yepnope等脚本加载器结合使用。

Answer 2

我会使用animate to class插件，因此我可以在样式表中定义right css属性

Answer 3

在使用媒体查询时，通常会在触发媒体查询时更改一个元素的宽度

所以我的解决方案基于CSS媒体查询的效果。它为window.resize()事件添加一个监听器，如果布局元素的宽度已更改，则加载脚本。

例如，如果您有以下媒体查询代码：

#changeTarget{
    width: 300px;
}
@media only screen and (min-width: 480px) {
    #changeTarget{
        width: 420px;
    }
}
@media only screen and (min-width: 768px) {
    #changeTarget{
        width: 600px;
    }
}
@media only screen and (min-width: 992px) {
    #changeTarget{
        width: 900px;
    }
}

然后javascript就是这样的：

var prevWidth; //previous width used for comparison
var detector; //the element used to compare changes

$(document).ready(function(){

    //set the initial values
    detector = $('#changeTarget');
    //Cache this width for later comparison
    prevWidth = detector.width();

    $(window).resize(function(){
        //If a change has happened, record this updated width and load your js
        if(detector.width()!=prevWidth){
            prevWidth = detector.width();

            // Load the JS files

        }

    });

});

通过不同的媒体查询加载JavaScript

3 个答案: