调整背景图片的大小以适合屏幕

Question

A little background - I write java, python, c# and hacky shell scripts by trade and have next to no experience with javascript (literally started today). 背景知识-我按行业编写Java，Python，C＃和hacky Shell脚本，几乎没有使用javascript的经验（从今天开始）。 I've been digging around and none of the questions here on stackoverflow have worked so far (or, perhaps I haven't the knack at js yet to make them work). 我一直在研究，到目前为止关于stackoverflow的所有问题都没有奏效（或者，也许我还没有使js起作用的诀窍）。

Anyhow, the story - I'd like a page in which the background alternates between a set of predetermined images that are stored locally (bg01.jpg to bgXX.jpg). 无论如何，故事-我想要一个页面，其中背景在一组本地存储的预定图像（bg01.jpg到bgXX.jpg）之间交替。 I have figured out how to cycle through the images and now I would like these images to actually fit the document background .. rather than just .. doing their own thing. 我已经弄清楚了如何循环显示图像，现在我希望这些图像真正适合文档背景..而不是仅仅..做自己的事情。

Here is what I have so far (which works) - (edited 15th Oct) 这是我到目前为止（有效）的内容-（编辑于10月15日）

<!DOCTYPE html>
<html>
<style>
body {background-repeat:no-repeat;}
</style>
<body>

<script>

var bgslides=new Array()
bgslides[0]="bg01.jpg"
bgslides[1]="bg02.jpg"
bgslides[2]="bg03.jpg"
bgslides[3]="bg04.jpg"
bgslides[4]="bg05.jpg"


//Specify interval between slide (in miliseconds)
var speed=1000

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
    processed[i]=new Image()
    processed[i].src=bgslides[i]
}

var inc=-1
function slideback(){
if (inc<bgslides.length-1)
    inc++
else
    inc=0
document.body.style.backgroundImage = "url("+bgslides[inc]+")";
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')


</script> 
</body>
</html>

I have tried 我努力了

image.width = ..
image.height = ..

But I think that the call to 但是我认为

document.body.background = image.src

Overrides previous changes to image.width .. Not that I have much clue. 覆盖对image.width的先前更改。不是我有太多线索。 I have also tried a few different resize functions that I have found about the place and modified, and attempted to alter the css (the section?) in js and so far ..nada. 我还尝试了一些关于位置的修改大小函数，并对其进行了修改，并尝试更改js中的CSS（本节？），以及迄今为止的..nada。

Is there anything that I can slot in to this to get it resizing happily?! 有什么我可以插入的，以使其愉快地调整大小吗？

Answer 1

Instead of document.body.background line, have you thought about something like 您是否考虑过类似document.body.background行的问题

document.body.style.backgroundImage = "url("+bgslides[inc]+")";

A few notes. 一些注意事项。 - The "new Image()" works with tags, but other than preloading the image, you wouldn't use that for CSS backgrounds. -“ new Image（）”与标签一起使用，但是除了预加载图像外，您不会将其用于CSS背景。 - Even though JavaScript doesn't require it, it is strongly recommended to end statements with semicolons. -即使JavaScript不需要它，也强烈建议以分号结束语句。 - You have a line "processed[i].size = " that is left undefined. -您有未定义的“ processed [i] .size =”行。 - You also include the "document.body.background = processed[inc].src" inside the else statement, when it should be outside the whole if/then. -当还应该在if / then之外时，您还可以在else语句中包含“ document.body.background =已处理[inc] .src”。

调整背景图片的大小以适合屏幕

问题描述

1 个解决方案

解决方案1
0 2013-10-14 05:05:18

调整背景图片的大小以适合屏幕

问题描述

1 个解决方案

解决方案1 0 2013-10-14 05:05:18

解决方案1
0 2013-10-14 05:05:18