Question

我正在使用此jQuery更改宽度小于600像素的屏幕上的图像，但是更改后的默认图像不会显示，一旦将屏幕减小到600以下，并在t5大于600时返回。

通过使用PHP代码内联添加默认图像来添加它。

我知道我可以再次添加图像以在600以上的屏幕上显示它，但是我想知道如何在不添加更多代码的情况下进行操作。

$(window).resize(function() {

    if ($(window).width() < 600) {
   
   $( '.div-background' ).css("background", "url('//i.ibb.co/QY97QZ6/b.jpg')")
    
}

});

.div-background { 
    background-image: url('https://i.ibb.co/sjtFBQb/image.jpg'); 
    background-repeat: no-repeat;
	  height: 100vh;
	  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div-background"><h1>HEADING</h1></div>

我不想使用CSS或jQuery重新添加默认图像。我只想确保上面的jQuery在宽度小于600px的屏幕上工作，并在大于600px时返回默认图像。

更新：我的意思是在屏幕宽度增加到600px以上后刷新浏览器而无需重新加载页面，因此我不需要重新添加默认图像。

Answer 1

您的代码从字面上将600更改为700，该代码段有效（因为我使用alert查找该代码段的$(window).width()值，即688px）。如果未在您的移动设备上触发，请尝试将方向从横向更改为纵向（某些移动浏览器会在方向更改时触发调整大小事件）。

或者，将调整大小，加载和方向更改用作事件... $(window).on('resize load orientationchange', function() { /* code here */ });。如果仍然无法使用，请在函数内部添加alert($(window).width())，以查看宽度是否确实小于600像素。我将其添加到下面的代码段中，但已被注释掉。

我之前对重复问题的评论解释说，您的代码已经可以使用了，实际上，我在下面的代码段中将background改回了background-image来说明这一点。

我在之前的评论中发布的jsFiddle链接还描述了如何将其改回（只需添加一个else语句，并将背景图像返回为默认图像）；我也将其添加到下面的代码段中。您可以在运行代码段后单击“整页”弹出链接来在代码段中对此进行测试（图像会按预期变回原状）。

$(window).resize(function() {
    //alert($(window).width());
    if ($(window).width() < 700) {
       $( '.div-background' ).css("background-image", "url('//i.ibb.co/QY97QZ6/b.jpg')");
    }
    else {
        $( '.div-background' ).css("background-image", "url('//i.ibb.co/sjtFBQb/b.jpg')");
    }
});

.div-background { 
    background-image: url('https://i.ibb.co/sjtFBQb/image.jpg'); 
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-background"><h1>HEADING</h1></div>

PHP确实与它没有任何关系（如果ASP，JSP，.NET或任何其他服务器端语言输出HTML都是一样的）-但是如果您不确定默认图像URL（因此您不知道将图像设置回什么），只需先抓取图像，然后再进行更改-然后侦听器可以使用该URL返回：

//set desktopImage to the image that's "set by PHP"
var desktopImage = $('.div-background').css('background-image');
//set mobileImage to the URL of the mobile version of the above image
var mobileImage = "url('//i.ibb.co/QY97QZ6/b.jpg')";
//whenever loading, resizing, or changing orientation, check screen width and swap images accordingly
$(window).on('resize load orientationchange', function() {
  if($(window).width() < 600) {
    $( '.div-background' ).css("background-image", mobileImage);
  }
  else {
    $( '.div-background' ).css("background-image", desktopImage);
  }
});

替代方法是为此专门定义CSS类：

<style>
  .div-background.small {
    background-image: url("//i.ibb.co/QY97QZ6/b.jpg");
  }
</style>

然后，仅当屏幕宽度小于600（或您选择的任何断点）时，您才可以简单地添加类：

$(window).on('resize load orientationchange', function() {
  $('.div-background').toggleClass('small', $(window).width() < 600);
});

更改屏幕上宽度小于600像素但不大于600像素的图像

1 个答案: