可缩放的背景图像，点击后会发生变化

Scalable background images that change on click

本文关键字：变化 缩放 背景 图像      更新时间：2023-09-26

我有一个问题，它在某种程度上是这个线程的扩展。

我有我的背景图像工作；但是，我不想让它们自动平铺，而是想将它们链接到浏览器中进行缩放。我知道如何使用CSS创建可扩展的背景图像，但我不知道如何将所述CSS链接到脚本中的backImage变量（可在下面获得，或在从上一个线程跳转后获得），以便它适用于所有各种图像。

<script type="text/javascript">
var backImage = [
    "images/street.png",
    "images/market.jpg",
    "images/building.jpg",
    "images/skyscraper.jpg",
    "images/gasstation.jpg",
    "images/trees.jpg"
];
function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};
</script>

棘手的部分是我不能将类应用于HTML，因为我已经在应用这个。。。

<a href="javascript:changeBGImage(1)">Change</a>

转换为HTML中的一个现有div和多个其他类；因此，我需要将类添加到backImage或javascript中的特定png和jpg。

提前感谢！

一个朋友帮我解决了问题。如下：

<script type="text/javascript">
var backImage = [
    "images/vintagemap.png",
    "images/earbuds.jpg",
    "images/flames.jpg",
    "images/grass.jpg",
    "images/library.jpg",
    "images/shapes.jpg"
];
function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.className = 'bgchange';
    }
};
</script>

我在原来的JS下面添加了一行"document.body.className='bgchange'；"，然后编写了以下CSS类：

.bgchange {
    background-repeat:no-repeat;
    background-size:cover;
}

它现在可以将任何照片调整为可缩放的全屏背景图像。

希望其他人觉得这很有帮助！

作为changeBGImage()函数的一部分，您可以对document.body进行额外的.style.更改，以便在每个背景图像更改时对其执行任何您喜欢的操作。

编辑：

从本质上讲，就拿这个来说：

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};

把它变成这样：

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.style.backgroundSize = '###px';
    }
};

或者，如果您想在body元素上设置background-size以外的CSS，您可以在.style.参数之后进行设置。请记住，当将CSS翻译为JS时，会删除连字符，并将下一个字母大写（就像CSS中的background-image变成JS中的backgroundImage一样）

相关文章：