jquery – 如何根据屏幕宽度更改图像路径?

前端之家收集整理的这篇文章主要介绍了jquery – 如何根据屏幕宽度更改图像路径?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图根据窗口宽度来更改我的图像被读取的文件夹。

我有两个文件夹包含不同的图像大小,我想知道是否有人可以给我任何建议,如何根据屏幕宽度更改路径。

如果屏幕是规则的< img>会看起来像

<img src="images/620x410/image1.jpg" alt="">

并且如果屏幕处于平板电脑的宽度,它将加载

<img src="images/310x205/images1.jpg" alt="">

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg

解决方法

你可以使用$(window).width();确定窗口的大小,然后相应地设置图像的src:
$(function() {
  if($(window).width() <= 310) {
    $("img").each(function() {
      $(this).attr("src",$(this).attr("src").replace("images/620x410/","images/310x205/"));
    });
  }
});

您还应该注意,如果我启动浏览器窗口大小为< = 310px,然后将其调整到以上,您的图像仍将是较小的版本。如果需要,您可能需要考虑使用resize事件来对抗:
http://api.jquery.com/resize/

原文链接:https://www.f2er.com/jquery/181762.html

猜你在找的jQuery相关文章