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);
  }
}

它看起来有点过于冗长，但这是一个开始。我转向引导程序以使用其响应类而不是从头开始。

Answer 2

使用CSS媒体查询和背景图片，例如

<div class="dynamic-image"></div>

和CSS

.dynamic-image {
    background: url(smallest-screen-size-image.png) ... ;
    /* and any other styles required, maybe even a nice transition */
    transition: all 0.15s linear;
}

@media (min-width: 930px) {
    .dynamic-image {
        background-image: url(Y.png);
    }
}

@media (min-width: 940px) {
    .dynamic-image {
        background-image: url(X.png);
    }
}

/* and so on */

在这里演示 - http://jsfiddle.net/gPtjz/

Answer 3

这里是a link to an example在jsFiddle中使用jQuery / JavaScript。

JS：

$(window).resize(function() {
    var viewportWidth = $(window).width();
    console.log(viewportWidth);
    $("#imageChanger").attr("src", viewportWidth + ".jpg");  
    $("#imageDescription").html(viewportWidth + ".jpg");  
});

HTML：

<div id="imageDescription">The filename will appear here</div>
<div ><img id="imageChanger" src="1.jpg" width="900" height="300"></div>

Answer 4

您最好的选择是使用媒体查询。尽管如此，它取决于您正在考虑使用多少图像来确定最佳解决方案。

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

4 个答案: