全屏背景圖像+旋轉圖像？
[英]Full Screen Background Image(s) + Rotating Images?
問題描述
我知道如何實現全屏/展開式背景圖片； 我通常使用jQuery方法。 EG： http ： //tinyurl.com/9yl4rbw
但！ 我正在嘗試使其每次訪問頁面時的背景圖像都不同。 不是幻燈片放映； 但就像舊的javascript（例如： 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圖片； 刷新頁面>新rad圖像； （x 30）
3 個解決方案
解決方案1
3 2012-08-28 21:41:04
將此代碼添加到JS的頂部。 它將圖像的src屬性設置為從Sandwichfullbg0.jpg到Sandwichfullbg29.jpg的隨機值（總共30個不同的圖像）
$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');
解決方案2
1 2012-08-28 20:59:05
看看這個 。 查看源代碼並將其簽出。 我使用Z索引較低的圖像，因為它使調整大小變得容易。 另外，我會優化您的背景圖片，使其不會太大。 它幾乎是MB，並且加載時間太長。 當寬高比不是寬屏時，您的版本的尺寸調整不佳。
解決方案3
1 已采納 2012-08-28 21:31:49
為什么不只使用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中看起來並不完美，但是圖像會完全拉伸以適合身體的高度/寬度。
添加全屏背景圖像的最佳方法是什么
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.