jquery - 响应式网站 - 基于浏览器窗口大小的不同图像

Question

我正在使用 html5、css3 和 jquery 创建一个响应式网站。我有一个我真的很想实现的想法，但我正在努力寻找一种方法来实现它。任何帮助将不胜感激/投赞成票。

我想在我的网页上显示特定图像取决于当前浏览器的大小。然后。我希望在浏览器窗口调整几个像素后立即用不同的图像替换该图像，例如向内拖动右窗口边缘。因此，在某种程度上，它会根据浏览器大小动画一系列图像。

 _ _ _ _ _ _ _ _ _ _ _
|                    /
|                    \
|                    /   <---
|                    \ 
|                X   /   <---
|                    \
|_ _ _ _ _ _ _ _ _ _ /

E.g. Page width: 940px

 _ _ _ _ _ _ _ _ _ _
|                  /
|                  \
|                  /   <---
|                  \ 
|              Y   /   <---
|                  \
|_ _ _ _ _ _ _ _ _ /

E.g. Page width: 930px

在上面的示例中，“X”代表一张图片，“Y”代表另一张图片，依此类推。因此，例如，窗口每缩小 10 个像素，就会在其位置出现一个新图像。

问题:

在不使用 Flash 的情况下，实现类似功能的最佳方式是什么？有没有更好的方法来制作这种“基于页面宽度的动画”？

欢迎所有评论。

谢谢。

Answer 1

使用纯 CSS3 你可以尝试类似的东西

@media all and (min-width: 1440x) {
  body {
   background: url(img1);
  }
}

@media all and (max-width: 1440px) and (min-width: 1024px) {
  body {
    background: url(img2);
  }
}

@media all and (max-width: 1024px) {
  body {
   background: url(img3);
  }
}

它看起来有点过于冗长，但这是一个开始。我会转而使用 bootstrap 来使用它的响应类，而不是从头开始。