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

No0ne

我使用的是我在网上发现的该脚本,每当刷新浏览器时,该脚本上都会显示随机的背景图片。

的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', });

});

在大于1150px的屏幕上工作正常,但小于此值的图像将开始在一个屏幕上叠加。无论屏幕大小如何,我如何都能将其拉伸。我不在乎图像是否会在小屏幕上裁剪,只要它能填满整个屏幕即可。

谢谢

法格尼·潘查(Falguni Panchal)

像这样

演示

JS

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

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

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

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

无法将背景图像显示到浏览器的全屏并使其响应

来自分类Dev

浏览器上传到服务器时找不到背景图像?

来自分类Dev

IE:背景图像不显示。浏览器在悬停时重绘吗?

来自分类Dev

IE:背景图像不显示。浏览器在悬停时重绘吗?

来自分类Dev

CSS-自适应-调整浏览器的宽度时裁剪背景图像的左右部分

来自分类Dev

使用uinavigationcontroller时的全屏背景图像

来自分类Dev

全屏浏览器时“ Firefox消失”

来自分类Dev

如何使用HTML设置适合浏览器的背景图像

来自分类Dev

浏览器正在下载页面上已加载的背景图像?

来自分类Dev

调整浏览器页面大小时放大/缩小背景图像

来自分类Dev

浏览器何时将下载样式表中定义的背景图像?

来自分类Dev

是否可以根据浏览器类型使用不同的CSS背景图像?

来自分类Dev

缩放背景图像,以使浏览器窗口居中和显示宽高比

来自分类Dev

仅在 Android 浏览器上无法正确显示背景图像

来自分类Dev

背景图像填充和调整到浏览器窗口

来自分类Dev

CSS 背景图像 url() 在各种浏览器中未显示错误“404 not found”

来自分类Dev

在地址栏中键入路径时,浏览器会打开图像,但不会将其显示为背景图像。为什么?

来自分类Dev

在地址栏中键入路径时,浏览器将打开图像,但不会将其显示为背景图像。为什么?

来自分类Dev

背景图像覆盖全屏

来自分类Dev

为什么浏览器窗口全屏时图像变得很小?

来自分类Dev

如何在导航栏后面和背景图像前面添加跨越浏览器宽度的背景颜色

来自分类Dev

浏览器找不到背景图片文件

来自分类Dev

从XnVew MP外部打开图像时,如何使XnView MP以浏览器模式而不是全屏模式打开图像?

来自分类Dev

单击导航栏时如何禁用刷新背景图像?

来自分类Dev

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

来自分类Dev

compass-mixins 插件无法在 Angular2 的浏览器中正确翻译背景图像属性

来自分类Dev

页面加载时使Google Chrome浏览器全屏显示

来自分类Dev

Chrome浏览器(Android版)在滚动时隐藏地址栏,在页脚下方展开背景图片

来自分类Dev

将图像加载到div而不刷新浏览器

Related 相关文章

  1. 1

    无法将背景图像显示到浏览器的全屏并使其响应

  2. 2

    浏览器上传到服务器时找不到背景图像?

  3. 3

    IE:背景图像不显示。浏览器在悬停时重绘吗?

  4. 4

    IE:背景图像不显示。浏览器在悬停时重绘吗?

  5. 5

    CSS-自适应-调整浏览器的宽度时裁剪背景图像的左右部分

  6. 6

    使用uinavigationcontroller时的全屏背景图像

  7. 7

    全屏浏览器时“ Firefox消失”

  8. 8

    如何使用HTML设置适合浏览器的背景图像

  9. 9

    浏览器正在下载页面上已加载的背景图像?

  10. 10

    调整浏览器页面大小时放大/缩小背景图像

  11. 11

    浏览器何时将下载样式表中定义的背景图像?

  12. 12

    是否可以根据浏览器类型使用不同的CSS背景图像?

  13. 13

    缩放背景图像,以使浏览器窗口居中和显示宽高比

  14. 14

    仅在 Android 浏览器上无法正确显示背景图像

  15. 15

    背景图像填充和调整到浏览器窗口

  16. 16

    CSS 背景图像 url() 在各种浏览器中未显示错误“404 not found”

  17. 17

    在地址栏中键入路径时,浏览器会打开图像,但不会将其显示为背景图像。为什么?

  18. 18

    在地址栏中键入路径时,浏览器将打开图像,但不会将其显示为背景图像。为什么?

  19. 19

    背景图像覆盖全屏

  20. 20

    为什么浏览器窗口全屏时图像变得很小?

  21. 21

    如何在导航栏后面和背景图像前面添加跨越浏览器宽度的背景颜色

  22. 22

    浏览器找不到背景图片文件

  23. 23

    从XnVew MP外部打开图像时,如何使XnView MP以浏览器模式而不是全屏模式打开图像?

  24. 24

    单击导航栏时如何禁用刷新背景图像?

  25. 25

    CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

  26. 26

    compass-mixins 插件无法在 Angular2 的浏览器中正确翻译背景图像属性

  27. 27

    页面加载时使Google Chrome浏览器全屏显示

  28. 28

    Chrome浏览器(Android版)在滚动时隐藏地址栏,在页脚下方展开背景图片

  29. 29

    将图像加载到div而不刷新浏览器

热门标签

归档