logo标签列表

浏览器刷新时随机全屏背景图片

javascriptcssrandomfullscreen
9

我正在使用在网上找到的脚本，使浏览器刷新时能够随机更换背景图片。

CSS

body{ 
background: no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

JS

$(document).ready(function(){
var images=['images/001.jpg',
            'images/002.jpg',
            'images/003.jpg',
            'images/004.jpg',
            'images/005.jpg',];

var randomNumber = Math.floor(Math.random() * images.length);
var bgImg = 'url(' + images[randomNumber] + ')';

$('body').css({'background':bgImg, 'background-size':'cover', });

});

屏幕宽度大于1150像素时，一切正常，但小于此尺寸时，图像开始堆叠在一起。我该如何让它在任何屏幕尺寸下都能拉伸？即使在小屏幕上裁剪图像，只要填充整个区域就可以了。

谢谢

3个回答
8

像这样

演示

JS（JavaScript）

$(document).ready(function(){
    var classCycle=['imageCycle1','imageCycle2'];

    var randomNumber = Math.floor(Math.random() * classCycle.length);
    var classToAdd = classCycle[randomNumber];

    $('body').addClass(classToAdd);

});
这是我遇到问题的示例。 - no0ne
3
我发现了这篇文章CSS3随机背景图片，它解决了我的问题。
<html>
<head>
<script type="text/javascript"> 
var totalCount = 5;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";// Background repeat
}
</script>
</head>
<body> 

// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

无论如何，感谢您 :)

即使有这个，我也遇到了问题，因为“HTML doctype”开始干扰JavaScript。请随意发表评论。 - no0ne
0

使用Falu的答案，该答案被投票选为正确答案，但是在此帖子中实现CSS方法作为＃1解决方案 - 完美全页背景图像

.imageCycle1{
background:url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 filter:    progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";}

它适用于各种屏幕尺寸，表现非常出色。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接