Question

基本上我有一个脚本可以检查1200px的浏览器分辨率。

如果分辨率大于1200px，则会加载幻灯片代码，但如果分辨率小于1200px，则不会加载代码，然后CSS会分配静态背景图像。

我看到的问题是，如果你首先加载小于1200px就可以得到想要的静态图像，然后如果你将窗口大小扩展到1200px以上，你也可以获得我想要的幻灯片，但是如果我去了回到1200px以下幻灯片继续运作。有没有办法来回载入然后卸载幻灯片代码？

我认为有平板电脑的人首先首先查看网站高视图，然后翻到横向视图，然后翻回高视图。当他们回到高视图时，幻灯片仍将继续运行。我希望这是有道理的。

这是我使用的jquery代码，如果有人可以帮我解决这个问题，我将不胜感激。

$(document).ready(function () {

        var $window = $(window).on('load resize', function(){
            // Notice I've combined load and resize because I need this to work on load/refresh as well as on resize.
            var width = $window.width();

                if (width >= 1200) {
                    // If resolution is greater than or equal to 1200px it loads this code... 
                    $("body").vegas({
                            delay: 10000,
                            shuffle: true,
                            transition: 'zoomOut',
                            transitionDuration: 7000,
                            animation: 'random',
                            timer: false,
                            slides: [
                                { src: "img/slides/001.jpg" },
                                { src: "img/slides/002.jpg" },
                                { src: "img/slides/003.jpg" },
                                { src: "img/slides/004.jpg" },
                                { src: "img/slides/005.jpg" },
                                { src: "img/slides/006.jpg" },
                                { src: "img/slides/007.jpg" },
                                { src: "img/slides/008.jpg" },
                                { src: "img/slides/009.jpg" },
                                { src: "img/slides/010.jpg" },
                                { src: "img/slides/011.jpg" }
                            ]
                        });
                } else if (width < 1200) {
                        // Else, nothing is loaded and a static image is set using CSS...
                        // Works when going from less than 1200 to more than 1200, but not vice versa.
                        // How do fix?
                }
        });
});

Answer 1

使用$(this)获取当前值。

$(document).ready(function () {
    $(window).on('load resize', function () {
        var width = $(this).width();
 //---------------- ^^^^^^^ --------------
        if (width >= 1200) {
            $("body").vegas({
                delay: 10000,
                shuffle: true,
                transition: 'zoomOut',
                transitionDuration: 7000,
                animation: 'random',
                timer: false,
                slides: [
                    {src: "img/slides/001.jpg"}, 
                    {src: "img/slides/002.jpg"}, 
                    {src: "img/slides/003.jpg"}, 
                    {src: "img/slides/004.jpg"}, 
                    {src: "img/slides/005.jpg"}, 
                    {src: "img/slides/006.jpg"}, 
                    {src: "img/slides/007.jpg"}, 
                    {src: "img/slides/008.jpg"}, 
                    {src: "img/slides/009.jpg"}, 
                    {src: "img/slides/010.jpg"}, 
                    {src: "img/slides/011.jpg"}
                ]
            });
        } else if (width < 1200) {
            /*...*/
        }
    });
});

Jquery - 如果超过一定数量的px加载，否则加载任何内容，反之亦然？

1 个答案: