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

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

但是！我试图让它每次页面被访问时背景图像都不同。不是幻灯片放映;但像旧的JavaScript（EG：http://www.computerhope.com/j18.htm）

我怎么能结合这两个; jQuery的可扩展背景和页面刷新新图像的JavaScript？

任何人都遇到过这种效果的质量插件？

* Edit_ _ _ *

我使用了jQuery方法与上述参考URL之内;下面主要：

<!--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图像;刷新页面>新的rad图像; （x 30）

来源

2012-08-28 Fred Randall

究竟是你使用jQuery的方法？它是如何工作的？ – Nick

刚刚编辑我的Q描述上面.. –

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

我为您创建了jsfiddle，基本上满足您的一切需求。（继续点击jsfiddle中的Run，你会随机看到背景图像周期）。

请注意，背景大小：封面，主要与较新的bowers一起使用，但通过使用Modernizr这可以克服。

在你的头

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

而在你的HTML标签链接它安装Modernizr的，

<html class="no-js">

编辑：根据意见，我做了，有更多的浏览器支持的另一种方式：
jsfiddle

这次我刚使它随机应用一个类，其中这个类有供应商前缀并修复ie-7/ie-8，其他所有问题确实如此。它在IE8中看起来不太完美，但图像将完全伸展以适合身体的高度/宽度。

来源

2012-08-28 21:31:49

Rad！这种方法有什么支持;我在过去的项目中引用的那个jQuery的唯一原因是因为我支持IE 7 +，？ –

您可以使用http://caniuse.com/来检查浏览器支持 – Kostia

您的答案具有误导性。请记住，Modernizr实际上并不修复旧版浏览器，它只是检测某些功能是否可用。 OP可以做的是使用yepnope.js（与标准Modernizr捆绑在一起），然后仅运行'background-size'的javascript函数不可用。当然，这不能回答OP所问的问题。 – Nix

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

来源

2012-08-28 20:59:05 meub

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

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

来源

2012-08-28 21:41:04 Kostia

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

回答

相关问题