全屏幕背景圖像+旋轉圖像？

我知道如何實現全屏/可擴展背景圖像;我通常使用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

全屏幕背景圖像+旋轉圖像？

回答

相關問題