如何在页面加载时全屏显示图像

我从先前的堆栈溢出问题中了解如何从数组中随机选取图像。如何在页面加载时全屏显示图像

Script to display an image selected at random from an array on page load

我希望把他的想法远一点，并显示在页面加载此图像全屏。我正在一个网站上工作，并有想法使用图像作为问候页面。在页面加载时，您会看到全屏高清图像。点击后，该图像会消失并显示完整网站。我不确定如何做到这一点。有任何想法吗？

编辑：我不是直接执行。只是一般的想法或js如何完成这项任务。

来源

2015-05-04 Walker

Atleast发布您试图完成您的想法的代码。 –

这将包括多个样式表和脚本文件。只是发布太多了。 – Walker

尝试使用CSS一样，

首先选项，

img { 
    position: fixed; 
    top: 0; 
    left: 0; 

    /* Preserve aspet ratio */ 
    min-width: 100%; 
    min-height: 100%; 
}

二选项，

img { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
}

要理解上面的选项读Perfect Full Page Background Image

我建议您为您的问题使用完整的整页背景图像滑块。如果可以使用它，不用浪费时间。

我在http://www.freshdesignweb.com/fullscreen-jquery-slider.html上发现了一个完整的页面滑块，其中第一个background slider最适合您。你

也可以去https://www.google.co.in/?q=full+background+image+slider，以获得更多的图像滑块

来源

2015-05-04 05:22:46

非常感谢你回到我身边。我其实已经阅读过链接，并且很好地理解CSS。它是我需要帮助的Jquery。其脚本使图像在页面加载时显示，然后在点击时消失。 – Walker

我不确定那是否正是我要找的，但随时可以不同意。 – Walker

对于显示在页面加载图像，你可以使用$(document).ready()功能。在click()您可以显示该网站的图像。

来源

2015-05-04 05:27:27

这就是我一直在尝试，但从那里我卡住了。我试试.addClass还是.attr？这些选择是给我麻烦的。 – Walker

为什么。如果你有css类，那么执行'addClass（）'。可以显示仅用于此的代码位。 –

下面是一个基本的jsFiddle，其中两件事情是工作的：1：橙色页面包装div不是浮动在所有内容之上2：.click不按预期工作。 http://jsfiddle.net/mc1Lep5c/ – Walker

如何在页面加载时全屏显示图像

回答

相关问题