2

这实际上是为了了解更多关于 JavaScript 和 CSS 的信息和学习目的。我有一个本地浏览器索引页面，我想在加载时旋转背景图像。在环顾四周并尝试了不同的解决方案之后，我选择了基本的旋转功能：

<html>
<head>
<script language="javascript" type="text/javascript">
function rotate()
{
   var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
   var aImg = Math.floor(Math.random()*imgArray.length);
   var img = imgArray[aImg];
   document.body.style.background = "url(" + img + ") no-repeat";
   document.body.style.backgroundSize = "cover";
}
</script>
</head>
<body onload="rotate()">
</body>
</html>

在此过程中，在我只是将其设置backgroundSize为封面以填充窗口之前，我正在考虑在从数组中选择它们之后将它们设置为背景图像之前调整图像大小的想法。

我做了很多搜索，我发现唯一真正可行的解决方案是通过 ID 选择元素，但这也要求图像具有关联的 ID，例如在 HTML 代码中的 IMG 属性中。此处使用 CSS 在 JavaScript 中选择并设置图像。

我尝试使用img.width/img.height和img.style.width/设置图像尺寸img.style.height，以及我遇到的其他一些随机解决方案，但是每当我尝试更改这些图像时，图像要么不会改变，要么根本不显示。

function rotate()
{
   var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
   var aImg = Math.floor(Math.random()*imgArray.length);
   var img = imgArray[aImg];
   image = rsize(img);
   document.body.style.background = "url(" + image + ") no-repeat";
   document.body.style.backgroundSize = "cover";
}
function rsize(image)
{
   image.style.width = "300px";
   image.style.height = "300px";
   return image;
}

我知道我可能在这里做错了什么。在这种情况下，我可以调整这些图像的大小吗？还是有更好的方法来构建它？

提前致谢。

4

2 回答 2

5

您必须在实际的图像 DOM 对象上设置image.style.width和image.style.height，而不是像当前尝试那样在 URL 上设置。

由于图像对象不用于背景图像，因此您不能真正直接为背景图像执行您想要执行的操作。

您可以使用 CSSbackground-size属性，但这是相当新的，并且在 IE9 之前的 IE 版本中不受支持。如果您使用它，您将为其设置实际大小，而不是"cover".

您也可以使用一个实际的 DOM 图像，然后将该 DOM 图像显示在您的页面中，如果这是您真正想要做的。

例如，以下是创建 DOM 图像对象、为其分配 URL、设置其大小并将其插入页面的方法：

var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var imgURL = imgArray[aImg];
var img = new Image();
img.src = imgURL; 
img.style.width = "300px";
img.style.height = "300px";
img.id = "centeredImage";
document.body.appendChild(img);

然后，您可以根据需要使用 CSS 将其定位在页面的中心。

在这里工作演示：http: //jsfiddle.net/jfriend00/jqMtV/

于 2012-06-07T17:02:40.473 回答
1

不，您没有<img>可以（重新）调整大小的元素（顺便说一句，它们不需要 id 即可选择）。您使用rsize(imgArray[aImg])对数组成员进行操作，这些成员是字符串而不是 DOM 元素，因此在其不存在的style属性上设置值会引发错误。

然而，您已经在使用backgroundSizestyle 属性的正确方式上。只是不要将其设置为cover，而是设置为您需要的大小！

document.body.style.backgroundSize = "300px 300px";

如果您想使用一个<img>元素，请将其添加到您的末尾<body>：

<img src="some.jpg" style="position:fixed; z-index:-1; width:100%; height:100%" />
于 2012-06-07T17:04:59.893 回答