gpt4 book ai didi

javascript - 是否可以循环更改 HTML5 或 css 中的不透明度值?

转载 作者:搜寻专家 更新时间:2023-10-31 08:18:55 24 4
gpt4 key购买 nike

这是我目前正在使用的代码。它适用于我将两个图像分层的目的。我想要做的是将 layer0 不透明度降低到 0,因为 layer1 不透明度在几秒钟内增加到 100。 {然后到 layer1 和 layer2 等等,最终循环回到 layer0}

如有任何帮助,我们将不胜感激。

<head>
<style>
div.layer0
{
width: 371px;
height: 345px;
background:url(image2.jpg);
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

div.layer1
{
width: 371px;
height: 345px;
background:url(image3.jpg);
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}

</style>
</head>

<body>
<div class="layer0">
<div class="layer1">
</div>
</div>
</body>

最佳答案

要在循环中持续执行此操作,您需要一些 javascript 来将适当的 active 类添加到您要显示的图像。然后使用 CSS 过渡,您可以实现所需图像之间的淡入淡出。

我创建了一个 jsfiddle 来给你一个这个工作的例子:http://jsfiddle.net/pacso/H6dqq/

基本情况如下。

一些您将淡出的简单 HTML div:

<div class='red square active'></div>
<div class='yellow square'></div>
<div class='green square'></div>
<div class='blue square'></div>

这些只是彩色方 block ,但您的可以包含图像。

接下来,一些 CSS 标记:

.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}

.square {
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 20px;

opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
.active {
opacity: 1;
}

请注意,我的转换会改变 div 本身的不透明度。您可能需要根据需要更改它。

现在 javascript 让它在无限循环中工作:

jQuery(function() {
window.setInterval(function () {
activeSquare = $('.active');
nextSquare = activeSquare.next()
if (nextSquare.length == 0) {
nextSquare = activeSquare.siblings().first();
}
nextSquare.addClass('active');
activeSquare.removeClass('active');
}, 3000);
});

相当简单。点击link to my fiddle如果您想查看工作演示,请点击运行按钮。

关于javascript - 是否可以循环更改 HTML5 或 css 中的不透明度值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20922833/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com