Question

我知道如何实现全屏/可扩展背景图像;我通常使用jQuery方法。 EG：http://tinyurl.com/9yl4rbw

BUT！我正在尝试制作它，以便每次访问页面时背景图像都不同。不是幻灯片放映;但就像旧的javascript（EG：http://www.computerhope.com/j18.htm）

我怎么能把两者结合起来; jQuery可扩展背景和页面刷新 - 新图像javascript？

有人遇到过这种效果的质量插件吗？

* Edit_ _ _ *

我在上面的参考URL中使用jQuery方法;基本上低于：

<!--Expandable BG code IE 7 +-->

  <style>

                #bg { position: fixed; top: 0; left: 0; }
                .bgwidth { width: 100%; }
                .bgheight { height: 100%; }

                #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;;  }

  </style> 


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
                $(function() {   

                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();

                        function resizeBg() {

                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }

                        }

                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");

                });
        </script>


<!--Expandable BG code IE 7 +-->

<!--Full BG Call-->

<img src="Sandwichfullbg.jpg" id="bg" >


<div id="page-wrap">


<!--End Full BG Call-->

我想找到一个简单的解决方案，在新页面访问或页面刷新时更改背景;理想情况下可容纳约30张图像。 EG：刷新页面＆gt;新的rad图像;刷新页面＆gt;新的rad图像; （x 30）

Answer 1

在JS的顶部添加此代码。它会将图像的src属性设置为从Sandwichfullbg0.jpg到Sandwichfullbg29.jpg的随机值（总共30个不同的图像）

$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');

Answer 2

看看this。查看源并查看它。我使用具有低z-index的图像，因为它使调整大小更容易。此外，我会优化你的背景图像，所以它不是那么大。这几乎是一个MB，加载时间太长。当宽高比不是宽屏时，您的版本不能很好地调整大小。

Answer 3

为什么不直接使用新的background-size:cover作为背景，然后使用jQuery按照常规方法随机更改此背景图像？

我为你创建了一个jsfiddle，基本上可以做你需要的一切。（继续单击在jsfiddle中运行，您将随机看到背景图像循环。）

请注意，背景大小：封面，主要适用于较新的保龄球，但使用Modernizr这可以克服。

通过在标题中链接来安装Modernizr

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

在HTML标记中

<html class="no-js">

编辑：根据评论，我采用了另一种方式，提供更多浏览器支持：
jsfiddle

这次我刚刚让它随机应用了一个类，其中该类具有供应商前缀并修复了ie-7 / ie-8以及所有其余部分。它在IE8中看起来并不完美，但图像会完全伸展以适应身体的高度/宽度。

全屏背景图像+旋转图像？

3 个答案: