javascript - 根据浏览器的屏幕分辨率更改 Logo 图像

Question

我有两张图片，一张带有黑色 Logo ，一张带有白色 Logo 。我希望当浏览器宽度小于 768px 时使用白色 Logo ，当宽度小于 768px 时使用黑色 Logo 。我尝试了一些但没有实时改变，只有当我重新加载页面时。

$(function() {
    if($(window).width() < 768){
        $('.logo').find("img").attr("src","/images/Trin-02.png");
    }
    else{
        $('.logo').find("img").attr("src","/images/Trin-01.png");
    }

});

有什么建议吗？谢谢

Answer 1

https://api.jquery.com/resize/

您正确地检查了窗口的宽度，但您只是在页面首次加载时才这样做!

而是使用 resize 函数在每次调整屏幕大小时运行脚本

$(window).on("resize", function(){
  if($(window).width() < 768){
      $('.logo').find("img").attr("src","/images/Trin-02.png");
  }
  else{
      $('.logo').find("img").attr("src","/images/Trin-01.png");
  }
})

虽然这听起来更像是 css 媒体查询的工作，但我们并不了解您的所有需求和要求:)