Question

我需要一些关于这个JavaScript代码的帮助，我对使用javascript都很陌生，所以当我遇到麻烦时会很烦人。我想要做的是在小屏幕（手机）上更改导航栏上显示的图像，因为导航栏颜色会发生变化。到目前为止我通过在线搜索得出的结果只有在手动缩小屏幕尺寸然后图像改变应该如此时才有效。但是我希望它也能加载到这种状态，这就是我被困住的地方。

$(window).on('resize', function(){
  var win = $(this);
  if (win.width() < 768) { 
      $(".navbar-brand img").attr('src', 'img/icons/logowhite.png');
  } else {
    $(".navbar-brand img").attr('src', 'img/icons/logodark.png');
}});

这可以在css中完成而不是我的问题吗？

Answer 1

demo in fiddle

JS

function resize(){
    if ($(window).width() < 768) { 
      $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/chrome_ntp_white_logo2.png');
  } else {
    $(".navbar-brand img").attr('src', 'https://www.google.com/images/srpr/logo11w.png');
  }
}
resize();
$(window).on('resize', resize);

HTML

<div class='navbar-brand'>
    <img src=''/>
</div>

Answer 2

这可以在css中完成而不是我的问题吗？

在CSS中比在Javascript中更容易和更好！

阅读这个问题： Responsive design with media query : screen size?

使用CSS更改背景图片的代码

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    div {
        background-image: url("img/icons/logowhite.png");
    }
}
@media only screen and (min-device-width : 768px) {
    div {
        background-image: url("img/icons/logodark.png");
    }
}

Answer 3

您正在谈论移动设备。你是在手机或模拟器中尝试这个代码吗？您说手动调整屏幕大小时代码有效。如果您在手机上提及调整大小事件，如果您不查看方向更改事件，它可能无效。

检查answer是否可以帮助您

更改页面宽度调整大小的图像

3 个答案: