2

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

但！我正在尝试使背景图像在每次访问页面时都不同。不是幻灯片；但就像旧的 javascript (EG: http://www.computerhope.com/j18.htm )

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

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

*编辑_ _ _*

我在上面的参考 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：刷新页面 > 新 rad 图像；刷新页面 > 新辐射图像；（×30）

4

3 回答 3

3

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

$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');
于 2012-08-28T21:41:04.007 回答
1

看看这个。查看源代码并进行检查。我使用 z-index 较低的图像，因为它使调整大小更容易。另外，我会优化你的背景图片，所以它不是那么大。它几乎是一个 MB，加载时间太长。当纵横比不是宽屏时，您的版本无法很好地调整大小。

于 2012-08-28T20:59:05.577 回答
1

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

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

请注意，background-size:cover 主要适用于较新的凉亭，但通过使用Modernizr可以克服这一问题。

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

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

在你的 HTML 标签中，

<html class="no-js">

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

这次我只是让它随机应用一个类，其中这个类有供应商前缀和修复 ie-7/ie-8 以及所有其他的。它在 IE8 中看起来并不完美，但图像会完全拉伸以适合身体的高度/宽度。

于 2012-08-28T21:31:49.897 回答